Message Bar

A dismissible full-width bar for time-sensitive messages, campaigns, and offers.

@volvo-cars/css v2.5.1@volvo-cars/react-messages v0.5.1

Message Bar Dismissible

volvocars.com

Show codeHide code

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

export function MessageBarDismissible() {
  const { visible, dismiss } = useDismiss({ key: 'spring-campaign' });

  return (
    <>
      {visible ? (
        <MessageBar
          action={
            <a className="link-underlined" href="#top">
              View offers
            </a>
          }
          onClose={dismiss}
        >
          Spring campaign - lease the EX30 from 4 990 kr / month.
        </MessageBar>
      ) : null}
      <div className="container-max py-sm">Page content.</div>
    </>
  );
}