Date label
A date label shows a date and can also show its status. It is not interactive.
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 { DateLabel } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| value * | string | None | The date as it should appear. The component does no formatting, so format it before passing it in. |
| appearance | 'default' | 'success' | 'removed' | 'moved' | 'default' | Adds a status to the date. Default shows a plain date with no status. |
Accessibility
What the component does for you, and what it needs from you.
- The date is plain text and is read out as written, so the format matters more than the colour.
- The appearance is colour only, so anything it shows must also be clear from the content around it.
- The label is not interactive and takes no focus.