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.

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