Flag
A flag shows confirmations, alerts and acknowledgements that need little interaction.
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 { Flag, FlagGroup } from '@wolf-rayet/react';Flag props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title * | string | None | What happened, in a few words. This is the part people read. |
| description | string | None | One sentence of detail. Leave it out when the title says everything. |
| appearance | 'normal' | 'info' | 'warning' | 'error' | 'success' | 'normal' | Normal for everyday confirmations. The other four are for messages that show a state. |
| actions | ReactNode | None | Two at most. A flag can disappear, so it must never be the only way to do something. |
| icon | ReactNode | None | Replaces the icon the appearance would choose. |
FlagGroup props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The flags. A group stacks them and manages their order. |
Accessibility
What the component does for you, and what it needs from you.
- A flag is announced when it appears, because people may be looking at another part of the page.
- A flag with actions stays open long enough for people to use them, instead of closing under the pointer.
- In dark mode the normal flag background turns light, because it uses the inverse surface in both themes.