Design systemBanner
A light blue message across the top of a page or panel, with an optional dismiss.
import { Banner } from "@/ui";Banner matches the Figma Banner component. Use it for something the person should know about the page they are on, and that stays true until they act or dismiss it. For a short-lived confirmation, use a Toast.
Default
A title in blue, one or two lines of supporting text, and a close button. Click × to try it.
<Banner title="Validate your key definitions" onDismiss={() => setOpen(false)}>
You have successfully added <strong>10</strong> key definitions. Validate them
now to ensure accurate results and insights based on your specific business context.
</Banner>Wrap numbers or names in <strong> to set them in medium weight, as Figma does with "10".
Variants
Every part except the fill is optional. Leave out onDismiss when the banner must stay, change the icon with icon, or pass icon={null} for text only.
<Banner title="HubSpot sync is paused">Campaign numbers stop updating until you reconnect.</Banner>
<Banner title="3 recommendations are ready" icon={Lightning} onDismiss={dismiss} />
<Banner icon={null}>Showing data up to Oct 12. Today's numbers arrive after the nightly sync.</Banner>Anatomy
| Part | Spec | Token |
|---|---|---|
| Container | 8px 12px padding, 8px radius, full width | --color-primary-50 |
| Icon | 18px Phosphor, fill weight | --color-primary-500 |
| Title | 12px medium, 19px line height | --color-primary-500 |
| Text | 12px regular, 19px line height | --color-text-primary |
| Gaps | 8px icon to text, 4px title to text | |
| Dismiss | Button blueGhost sm, 28px, 12px × |
In Figma the banner sits in a white strip with 16px side and 8px top and bottom padding. That strip belongs to the page layout, so it is not part of the component.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
title | string | One line. | |
children | ReactNode | Supporting text. | |
icon | Phosphor icon | null | Info | Drawn at 18px, fill weight. |
onDismiss | function | Shows the × button. | |
className | string | "" | For layout only. |
Accessibility
- The banner has
role="status", so screen readers announce it when it appears without moving focus. - The × button is labelled "Dismiss".
- The icon is hidden from screen readers. The title has to carry the meaning.
Do and don't
- Do say what happened and what to do next. Keep the title under about six words.
- Do show one banner at a time on a page.
- Don't use a banner for errors that block a form. Show those next to the field.
- Don't change the fill to red or green. Banner is blue only; for a coloured status, use a Notification.