Inline message
An inline message tells users when important information is available or when they need to act.
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 { InlineMessage } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | None | A heading inside the message. Leave it out for a single line. |
| secondaryText | string | None | Shown next to the icon before the message is opened. Keep it to two or three words. |
| appearance | 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error' | 'connectivity' | Sets the icon and its colour. Match it to what the message is about. |
| children * | ReactNode | None | The message, shown when someone selects the icon. |
Accessibility
What the component does for you, and what it needs from you.
- The trigger is a real button, so people can reach it with a keyboard and its expanded state is announced.
- The message is linked to its trigger, so screen readers read it in the right place.
- The content is hidden by default, so do not put anything essential in it.