Inline message
An inline message lets users know when important information is available or when an action is required.
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 { InlineMessage } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | The heading inside the message that opens. Leave it out for a single line. |
| secondaryText | string | — | Shown beside the icon, before anything is opened. Keep it to two or three words. |
| appearance | 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error' | 'connectivity' | Picks the icon and its colour. Match it to what the message is about. |
| children * | ReactNode | — | The message itself, revealed when the icon is chosen. |
Accessibility
What the component does for you, and what it needs from you.
- The trigger is a real button, so it is reachable and its expanded state is announced.
- The message is associated with its trigger, so it is read in place rather than appearing loose in the order.
- Because the content is hidden by default, nothing essential should be in it. That is a content rule before it is a technical one.