'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
Banner
A site-wide announcement bar above the header: launches, sales, maintenance.
Ant Design: Alert banner
import { Banner } from '@alea/ui';
Examples
Announcements
The accent banner for launches; info and warning for notices.
Props
Banner props
A site-wide announcement bar above the header: launches, sales, outages (Ant Alert banner, Atlassian Banner).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The message. Keep it to one line on desktop. |
action | ReactNode | - | A link or button after the message. |
aria-label | string | - | Name of the region. Default "Announcement"; give each banner its own when there are several. |
className | string | - | |
onDismiss | (() => void) | - | Shows a close button; called when closed. |
tone | "danger" | "warning" | "accent" | "info" | 'accent' | accent (default, gradient), info, warning or danger. |
Accessibility
- A region named "Announcement"; it is not announced on load, so it never interrupts.
- The dismiss button says what it closes.
Keyboard
| Key | Does |
|---|---|
| Tab | Reaches the link and the dismiss button |
Do and don't
Do
- One banner at a time.
- Let people dismiss it and remember that choice.
Don't
- Don't use it for errors in a form: use Alert.