Message Bar

Use MessageBar from @volvo-cars/react-messages, or build with plain HTML using the message-bar CSS class.

Content stacks vertically on small screens and switches to a single row on large screens. The dismiss button is always positioned at the top end corner.

Width and margins

The background stretches edge-to-edge, but the content area respects the page layout max-width. Inline padding uses --v-space-pageoffset, which resolves to --v-space-pagemargin on normal viewports and adds extra centering space on viewports wider than --v-size-pagemax.

Autosmmdlgxl

volvocars.com

Show codeHide code

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

export function MessageBarExample() {
  return (
    <MessageBar
      action={
        <a className="link-underlined" href="#top">
          View offers
        </a>
      }
    >
      Spring campaign - lease the EX30 from 4 990 kr / month.
    </MessageBar>
  );
}

Dismissible

Pass an onClose callback to render the dismiss button and handle the visibility of the message bar. The dismiss button’s accessible label follows the page language. See Localization.

Use useDismiss from @volvo-cars/react-utils to manage visibility and optional session persistence so the bar stays dismissed across page loads in the same browser session.

In browsers that support interpolate-size, Message Bar will animate out when being dismissed.

Accessibility

• Ensure the action link has meaningful text that describes the destination.

Props

Prop	Type	Required	Default
children	ReactNode	-	-
The message bar's description. Pass the message text as children.
action	ReactElement<{ slot?: "action"; }, string | JSX...	-	-
Optional action rendered alongside the description, typically a link. Use the `link-underlined` class on `<a>` elements for the correct styling.
onClose	(() => void)	-	-
Callback for dismissing the message bar. When provided, a close button is rendered. Fires after the collapse animation completes.

CSS-only usage

Use the message-bar class to build the component when you need more flexibility or to use it without React. For animation on dismissal, add the data-closing attribute when dismissing and remove the Message Bar after the animation has finished.

Autosmmdlgxl

volvocars.com

Show codeHide code

<div class="message-bar">
  <p slot="description">
    Spring campaign - lease the EX30 from 4 990 kr / month.
  </p>
  <a slot="action" class="link-underlined" href="#top">View offers</a>
</div>

Slots

This component uses slots to give content built-in styling.

• slot="description" – Message text
• slot="action" – Link to a destination page
• slot="dismiss" – Close button

Autosmmdlgxl

volvocars.com

Show codeHide code

<div class="message-bar">
  <code slot="description">description</code>
  <code slot="action">action</code>
  <code slot="dismiss">dismiss</code>
</div>

CSS reference

Class	Description
message-bar	Dismissible message bar. Neutral background, inverted text. Stacked below lg, inline on lg+.