Banner
A banner shows an important message at the top of the screen.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Banner } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The message. Keep it to one sentence, because people read banners in passing. |
| appearance | 'warning' | 'error' | 'announcement' | 'warning' | Warning for something people should know, error for something broken, announcement for news. |
Accessibility
What the component does for you, and what it needs from you.
- A banner that appears after the page loads is announced, so people who cannot see the top of the page still hear about it.
- Warning uses dark text on yellow in both themes. It is the only bold background that does not invert.
- Colour is what tells the three appearances apart, so the words must also make clear how serious the message is.