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>
  I'm rather embarrassed, General Solo, but it appears that you are to be the
  main course at a banquet in my honor.
</Message>

Message states

Choose between five different states:

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

  <Message>
    Default (follow theme) with a <a href="#">link</a>
  </Message>
  <Message state="neutral">
    Neutral with a <a href="#">link</a>
  </Message>
  <Message state="brand">
    Brand with a <a href="#">link</a>
  </Message>
  <Message state="chill">
    Chill with a <a href="#">link</a>
  </Message>
  <Message state="attn">
    Attention with a <a href="#">link</a>
  </Message>
  <Message state="success">
    Success with a <a href="#">link</a>
  </Message>
  <Message state="warning">
    Warning with a <a href="#">link</a>
  </Message>
  <Message state="alert">
    Alert with a <a href="#">link</a>
  </Message>

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.

import { useState } from "react";
import Message from "@intility/bifrost-react/Message";
import Button from "@intility/bifrost-react/Button";
import Grid from "@intility/bifrost-react/Grid";

export default function () {
  const [open, setOpen] = useState(false);

  return (
    <Grid>
      <div>Current state: {open ? "Open" : "Closed"}</div>
      <div>
        <Button onClick={() => setOpen(!open)}>Toggle state</Button>
      </div>
      <Message
        header="Controlled mode"
        isOpen={open}
        onHeaderClick={() => setOpen(!open)}
      >
        Have a nice day 😁
      </Message>
    </Grid>
  );
}

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.

Supports four states:

• default (same as not supplying a state)
• neutral
• brand
• chill
• attn
• success
• warning
• alert

<Message statusBar>
  Default (follow theme) with a <a href="#">link</a>
</Message>
<Message statusBar state="neutral">
  Neutral with a <a href="#">link</a>
</Message>
<Message statusBar state="brand">
  Brand with a <a href="#">link</a>
</Message>
<Message statusBar state="chill">
  Chill with a <a href="#">link</a>
</Message>
<Message statusBar state="attn">
  Attention with a <a href="#">link</a>
</Message>
<Message statusBar state="success">
  Success with a <a href="#">link</a>
</Message>
<Message statusBar state="warning">
  Warning with a <a href="#">link</a>
</Message>
<Message statusBar state="alert">
  Alert with a <a href="#">link</a>
</Message>

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-duotone-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>

Close button sandbox

import { useState } from "react";
import Message from "@intility/bifrost-react/Message";
import Button from "@intility/bifrost-react/Button";

export default function ClosableMessageDemo() {
  const [showMessage, setShowMessage] = useState(true);
  const [showStatusBar, setShowStatusBar] = useState(true);

  return (
    <div className="bfl-grid">
      <div>
        {showMessage ? (
          <Message
            header="Closable message"
            onClose={() => setShowMessage(false)}
          >
            Now, I know what you're thinking. “Oh, no! Thor's in a cage. How did
            this happen?” Well, sometimes you have to get captured just to get a
            straight answer out of somebody. It's a long story, but basically,
            I'm a bit of a hero. See, I spent some time on Earth. Fought some
            robots, saved the planet a couple of times. Then I went searching
            through the cosmos for some magic, colorful Infinity Stone things.
            Didn't find any. That's when I came across a path of death and
            destruction, which led me all the way here into this cage, where I
            met you. [Glances over at skeleton]
          </Message>
        ) : (
          <Button onClick={() => setShowMessage(true)}>
            Show closable message
          </Button>
        )}
      </div>
      <div>
        {showStatusBar ? (
          <Message statusBar onClose={() => setShowStatusBar(false)}>
            Piss off, ghost!
          </Message>
        ) : (
          <Button onClick={() => setShowStatusBar(true)}>
            Show statusBar message
          </Button>
        )}
      </div>
    </div>
  );
}

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>