Date label
Date label is a non-interactive label that displays a date and optionally, visually communicates its status.
When to use
- A date attached to an item in a list, such as a due date on a task or a release date on a version.
- A date that carries a state worth seeing, such as a deadline that has passed.
When not to use
- A date a reader will select or edit. That is a date time picker.
- A date in running text. Write it as text, where it reads as part of the sentence.
- A status with no date in it. That is a lozenge.
Guidance
Do
12 Oct 2026
Use the appearance only when the date itself has a state, such as a deadline already gone by.
Don't
12/10/26
Do not use an ambiguous numeric format, and do not colour a date that carries no state. Both make the reader work out what you meant.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| date-label | neutral | 0.042Ambient | 0.066Substrate |
| date-label--moved | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| date-label--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| date-label--success | accent-green-subtler | 0.081Ambient | 0.172Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Spell the month. 12 Oct 2026 reads the same everywhere, while 12/10/26 does not.
- Drop the year when the date is close and the year is not in doubt.
- Do not add a word for the state. The appearance carries it, and the text should stay a date.