Inline Message

Inline messages display prominent information with a colored background indicating intent. Use InlineMessage from @volvo-cars/react-messages, or build with plain HTML using the inline-message CSS class.

Information

Your session will expire in 5 minutes.

import { InlineMessage } from '@volvo-cars/react-messages';

export function InlineMessageBasic() {
  return (
    <InlineMessage
      title="Information"
      description="Your session will expire in 5 minutes."
    />
  );
}

Or use plain HTML with the inline-message class. Apply font-medium on the title paragraph:

Information

Your session will expire in 5 minutes.

<div class="inline-message">
  <p class="font-medium">Information</p>
  <p>Your session will expire in 5 minutes.</p>
</div>

Intent

Control the color scheme with the intent prop (React) or data-color attribute (CSS). Defaults to neutral.

Information

Your session will expire in 5 minutes.

Success

Your order has been confirmed.

Warning

Stock is limited for this item.

Error

Payment could not be processed. Please try again.

import { InlineMessage } from '@volvo-cars/react-messages';

export function InlineMessageIntents() {
  return (
    <div className="stack-16">
      <InlineMessage
        title="Information"
        description="Your session will expire in 5 minutes."
      />
      <InlineMessage
        intent="positive"
        title="Success"
        description="Your order has been confirmed."
      />
      <InlineMessage
        intent="warning"
        title="Warning"
        description="Stock is limited for this item."
      />
      <InlineMessage
        intent="negative"
        title="Error"
        description="Payment could not be processed. Please try again."
      />
    </div>
  );
}

Expand code Collapse code

For CSS-only usage, set the data-color attribute to positive, warning, or negative. Omit it for the default neutral style.

Orientation

Use orientation="horizontal" (React) or data-orientation="horizontal" (CSS) for single-line messages in wider containers. Content wraps to vertical layout automatically when it doesn’t fit.

Notice

Free delivery on orders over €50.

<div class="inline-message" data-orientation="horizontal">
  <p class="font-medium">Notice</p>
  <p>Free delivery on orders over €50.</p>
</div>

With action link

Pass children to add action links or other content below the description:

Semiconductor shortage

The global car and electronics industries are impacted by the shortage of semiconductors.

Learn more

Notice

Free delivery on orders over €50.

Learn more

import { InlineMessage } from '@volvo-cars/react-messages';

export function InlineMessageWithLink() {
  return (
    <div className="flex-col gap-8">
      <InlineMessage
        title="Semiconductor shortage"
        description="The global car and electronics industries are impacted by the shortage of semiconductors."
      >
        <a href="#learn-more">Learn more</a>
      </InlineMessage>
      <InlineMessage
        title="Notice"
        description="Free delivery on orders over €50."
        orientation="horizontal"
      >
        <a href="#learn-more">Learn more</a>
      </InlineMessage>
    </div>
  );
}

Expand code Collapse code

Dismissible

Pass onClose to render a close button. The component adds end padding to accommodate it.

Use useDismiss to manage visibility and optional session persistence.

Notice

This message can be dismissed.

import { InlineMessage } from '@volvo-cars/react-messages';
import { useState } from 'react';

export function InlineMessageDismissible() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <button
        type="button"
        className="button-outlined"
        onClick={() => setVisible(true)}
      >
        Show message
      </button>
    );
  }

  return (
    <InlineMessage
      title="Notice"
      description="This message can be dismissed."
      closeLabel="Dismiss message"
      onClose={() => setVisible(false)}
    />
  );
}

Expand code Collapse code

Accessibility

• Use role="alert" for error or critical messages that need immediate attention
• Use role="status" for informational messages that don’t require immediate action
• Provide closeLabel when the default localized close button label needs a more specific accessible name (e.g., “Dismiss message”)
• Ensure interactive elements within the message are keyboard accessible

See the accessibility requirements for the full WCAG compliance table.

Props

Prop	Type	Required	Default
description	string	✓	-
intent	"neutral" | "positive" | "negative" | "warning"	-	neutral
orientation	"horizontal" | "vertical"	-	vertical
closeLabel	string	-	-
Optional `aria-label` override for the close button. If omitted, a localized default label is used.
onClose	(() => void)	-	-
Callback for dismissing the message. When provided, a close button is rendered.