Section message
A section message is used to alert users to a particular section of the screen.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { SectionMessage } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | A short heading. Leave it out when the message is one line and the heading would only repeat it. |
| children * | ReactNode | — | The message. Two or three sentences at most. |
| appearance | 'information' | 'warning' | 'success' | 'error' | 'discovery' | 'information' | Matches the message to its kind. Information is the default and the right choice more often than not. |
| actions | ReactNode | — | One or two actions belonging to the message. Anything more belongs on the page. |
Accessibility
What the component does for you, and what it needs from you.
- The message sits in the flow next to what it describes, so it is reached in reading order rather than announced from nowhere.
- The five appearances differ by colour and icon, so the wording still has to carry the meaning.
- Actions are real buttons and links, reachable in order after the message that explains them.