Inline Message

Edit on GitHub

Display prominent messages with a colored background indicating intent, with optional actions and dismiss button.

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

Inline Message Intents

Information

Your session will expire in 5 minutes.

Success

Your order has been confirmed.

Warning

Stock is limited for this item.

Error

Payment could not be processed. Please try again.

Show codeHide code

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

export function InlineMessageIntents() {
  return (
    <div className="stack-16">
      <InlineMessage
        title="Information"
        description="Your session will expire in 5 minutes."
      />
      <InlineMessage
        intent="positive"
        title="Success"
        description="Your order has been confirmed."
      />
      <InlineMessage
        intent="warning"
        title="Warning"
        description="Stock is limited for this item."
      />
      <InlineMessage
        intent="negative"
        title="Error"
        description="Payment could not be processed. Please try again."
      />
    </div>
  );
}

Horizontal inline message

Notice

Free delivery on orders over €50.

Show codeHide code

<div class="inline-message" data-orientation="horizontal">
  <p class="font-medium">Notice</p>
  <p>Free delivery on orders over €50.</p>
</div>

Inline Message With Link

Semiconductor shortage

The global car and electronics industries are impacted by the shortage of semiconductors.

Learn more

Notice

Free delivery on orders over €50.

Learn more

Show codeHide code

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

export function InlineMessageWithLink() {
  return (
    <div className="flex-col gap-8">
      <InlineMessage
        title="Semiconductor shortage"
        description="The global car and electronics industries are impacted by the shortage of semiconductors."
      >
        <a href="#learn-more">Learn more</a>
      </InlineMessage>
      <InlineMessage
        title="Notice"
        description="Free delivery on orders over €50."
        orientation="horizontal"
      >
        <a href="#learn-more">Learn more</a>
      </InlineMessage>
    </div>
  );
}

Inline Message Dismissible

Notice

This message can be dismissed.

Show codeHide code

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

export function InlineMessageDismissible() {
  const [visible, setVisible] = useState(true);

  if (!visible) {
    return (
      <button
        type="button"
        className="button-outlined"
        onClick={() => setVisible(true)}
      >
        Show message
      </button>
    );
  }

  return (
    <InlineMessage
      title="Notice"
      description="This message can be dismissed."
      closeLabel="Dismiss message"
      onClose={() => setVisible(false)}
    />
  );
}