Date label
Date label is a non-interactive label that displays a date and optionally, visually communicates its status.
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 { DateLabel } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| value * | string | — | The date as it should read. The component does no formatting, so format it for the reader before passing it in. |
| appearance | 'default' | 'success' | 'removed' | 'moved' | 'default' | Adds a status to the date. Default is a plain date with no claim about it. |
Accessibility
What the component does for you, and what it needs from you.
- The date is plain text, so it is read as written. This is why the format matters more than the colour.
- The appearance is colour only, so anything it says must also be available from the surrounding content.
- The label is not interactive and takes no focus.