Banner

Tones

neutral, the default, for how things are, the Inbox's hand-off reason among them. attention for something broken that needs fixing: red on the wash and the icon, while the words stay ink and keep AAA contrast. The icon sits centred on the words, one line or two.

import { Banner } from "@/components/shared/banner";

<Banner>
  Okami passed this to you: Asks whether there's parking near the studio.
</Banner>
<Banner tone="attention">
  Instagram is disconnected: Okami can't answer DMs until you reconnect it.
</Banner>

With an action

<Banner
  tone="attention"
  action={<Button size="xs" variant="secondary">Reply</Button>}
>
  Waiting for your answer since 10:11.
</Banner>

Guidelines

• A Banner is the screen telling you; a Notice is Okami speaking in the thread. Use a Banner under a header, about the whole page.
• One at a time, a sentence or two. What needs the person goes in attention; everything else is neutral.

API reference