Lozenge
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
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 { Lozenge } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | The status. One or two words, in sentence case. |
| appearance | 'default' | 'inprogress' | 'success' | 'removed' | 'moved' | 'new' | 'lime' | 'yellow' | 'teal' | 'magenta' | 'default' | Picks the colour. The first six carry a meaning and should be matched to the status. The last four are colours with no meaning attached, for statuses of your own. |
Accessibility
What the component does for you, and what it needs from you.
- The text is the label, so it must say the state on its own without the colour. Colour is a second channel, never the only one.
- A lozenge is not focusable and takes no keyboard interaction, because it is a label rather than a control.
- Every appearance pair was measured for contrast in both themes.