Message

Basic message

<Message> is a colored text box, primarily used to emphasize content in text-heavy pages. It may contain optional content such as text, lists, images etc.

<Message>Message text content</Message>

Message states

Choose between different states:

• default (same as not supplying a state, follows current theme)
• neutral
• brand
• chill
• attention
• success
• warning
• alert

<Message state="success">

Header

Including a header will also render an icon depending on the state.

<Message header="Header text">Message text</Message>

Expandable

You can make Message expandable with the expandable prop. Use with the header prop to supply the toggle button text.

<Message expandable header="Header text will be the clickable button">
  Content inside will be toggleable
</Message>

isOpen prop

Render an expandable message as expanded by default.

<Message expandable isOpen header="Default open">
  Use <code>isOpen</code> to initially render message expanded.
</Message>

Controlled mode

Expanded state can be controlled, pass your own isOpen state, combined with onHeaderClick prop.

Status bar

statusBar prop is for a message that contains important information. A status bar is a one-liner, that starts with an icon and is preferably placed on top of a page.

<Message statusBar>

Combine with state for more background and text color pairings:

<Message statusBar state="neutral">

Expandable status bar

You can combine statusBar with expandable. As with any expandable message, header is required.

<Message statusBar expandable header="Header text">
  ...
</Message>

Custom icon

If you want to use a custom icon, use icon prop. Works for any state and statusBar as well. You can opt-out of the automatic icon with noIcon.

import { faStarshipFreighter } from "@fortawesome/pro-regular-svg-icons";

<Message
  icon={faStarshipFreighter}
  header="You've never heard of the Millennium Falcon?"
>
  It's the ship that made the Kessel run in less than twelve parsecs. I've
  outrun Imperial starships. Not the local bulk cruisers, mind you. I'm talking
  about the big Corellian ships, now. She's fast enough for you, old man.
</Message>;

Border radius

Control the degree of rounded corners with the radius prop. Valid values are:

• "none" 0px
• "xs" 4px
• "s" 8px
• "m" 12px (default)
• "l" 16px
• "xl" 24px

This can be useful when placing a statusBar at the edge of a page, or when nesting multiple elements.

<Message statusBar radius="none">
  statusBar radius="none"
</Message>
<Message expandable radius="xl" header='radius="xl"'>
  <Message radius="l">radius="l"</Message>
</Message>

Close button

Pass a callback to onClose to display a close button. You'll need to hide the message yourself. A closable message cannot also be expandable.

<Message header="Closable message" onClose={onCloseHandler}>
  Closable message
</Message>

Badge examples

Badge placed before icon

Message headers get a left-aligned icon by default, and you can't place anything before it.

You can, however, disable the icon with noIcon and substitute your own.

Also, <Inline> comes in handy to center the elements and provide a 8px gap.

<Message
  noIcon
  header={
    <Inline align="center" gap={8}>
      <Badge inverted>Badge</Badge>
      <Icon icon={faCircleInfo} />
      Header text
    </Inline>
  }
>
  Message content
</Message>

Right-aligned pill badge

<Inline.Stretch> allows us to stretch the header text element, pushing the badge to the right:

<Message
  noIcon
  header={
    <Inline align="center" gap={8}>
      <Icon icon={faCircleInfo} />
      <Inline.Stretch>Header text</Inline.Stretch>
      <Badge inverted pill>
        Badge
      </Badge>
    </Inline>
  }
>
  Message content
</Message>