Message Bar

The message bar displays a brief message with an optional action link and dismiss button. It uses a neutral background with inverted foreground to stand out from surrounding content.

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.

Use a <div> or <section> element as the root.

Auto sm md lg xl

volvocars.com

import { IconButton } from '@volvo-cars/react-icons';

export function MessageBar() {
  return (
    <div className="message-bar">
      <p slot="description">
        Spring campaign - lease the EX30 from 4 990 kr / month.
      </p>
      <a className="link-underlined" slot="action" href="#top">
        View offers
      </a>
      <IconButton
        slot="dismiss"
        aria-label="Dismiss"
        variant="clear"
        icon="x"
        bleed
      />
    </div>
  );
}

Expand code Collapse code

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

Auto sm md lg xl

volvocars.com

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

Dismissal

The message bar is purely presentational, so your app controls whether it renders (for example by removing it from the DOM or toggling the hidden attribute). Use useDismiss to manage visibility and optional session persistence, or omit the dismiss slot when the bar should not be dismissible.

Accessibility

• Use a <button> for the dismiss control with a descriptive aria-label (e.g. “Dismiss”). You can use ButtonIcon from @volvo-cars/react-icons for this.
• Ensure the action link has meaningful text that describes the destination

CSS reference

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