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

Does not support header prop (will be ignored).

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

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

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>
<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>
  );
}