Banner
A one-line suggestion across a page: an icon, the message, an action and how long it takes, dismissed for good once closed.
import { Banner } from "@butteryui/react";Demo
When to use it
Use it for
- Suggesting one thing to set up on the page it helps with, such as a label printer above the orders table
- A notice people can act on or dismiss and not see again
Not for
- An error or a warning about what's on the page: use Callout, which can't be dismissed
- Something that just happened: use a toast
- A longer tip with a title and media: use RecommendationCard
Examples
Label printer
A suggestion above the orders it helps with, which stays dismissed on later visits.
Orders
To pack
Order 1051 for Ines Vale
Order 1052 for Oskar Lind
Order 1053 for Mira Okafor
Shipping cutoff
A suggestion whose action is a button that makes the change in place, then offers to undo it.
Variants and states
Dismissed in place
Dismiss it: it fades where it is, then the block below slides up. Under 640px of room the action moves under the message.
Just a message
Props
Banner
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | The message, a sentence in body-sm. | |
icon | ComponentType<IconComponentProps> | A 16px icon before the message. Defaults to an info icon. | |
action | GuidanceAction | What to do about it, as a link in the accent color after the message. | |
estimate | string | How long the action takes, such as "3 min", beside it with a clock. | |
dismissLabel | string | "Dismiss" | Names the dismiss button. Defaults to "Dismiss". |
onDismiss | (() => void) | Called once it has faded and gone. | |
storageKey | string | Remembers the dismissal under this key, so it stays gone on later visits. |
It also takes Omit<MotionElementProps<"div">, "children">.
GuidanceAction
What a guidance part points to: a label, and where it goes or what it does.
| Field | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What it says, such as "Connect a label printer". | |
href | string | Makes it a link to this page. | |
onClick | ((event: MouseEvent<HTMLElement>) => void) | Runs when it's pressed, or as its link is followed, where a router can take over. |
Accessibility
Its message and action read in the page's order. The action is a link, or a button without an href. The time estimate is read as Takes about and the time. The dismiss button is named Dismiss; once it's pressed the banner fades and is gone, and focus in it moves on to the next tab stop.
| Keys | What they do |
|---|---|
| Enter | Follows the action when it's a link |
| Enter or Space | Presses the action when it's a button, or Dismiss, which fades the banner and moves focus on to the next tab stop |
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: Dismissed, it fades out in 100ms and what's below takes its place at once instead of sliding up.
Layout
It's as wide as its container, a bg-section strip with r12 corners whose row is at least 28px tall (--bt-h-sm), padded 8 above and below. The message takes the room between the icon and the action and wraps, the action moves under it under 640px of the banner's own width, and the action and the Dismiss button are 28px targets.
Related
See it in the roastery demo's overview.