Inline Message

Use InlineMessage from @volvo-cars/react-messages, or compose the same pattern with the inline-message CSS class.

Information

Your session will expire in 5 minutes.

Show codeHide code

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

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

Information

Your session will expire in 5 minutes.

Show codeHide code

<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.

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.

With action link

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

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.

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
title	string	-	-
description	string	✓	-
intent	"neutral" | "positive" | "negative" | "warning"	-	neutral
orientation	"vertical" | "horizontal"	-	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.