Date label
A date label shows a date and can also show its status. It is not interactive.
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 with a status people need to see, such as a deadline that has passed.
When not to use
- A date people will select or edit. That is a date time picker.
- A date in running text. Write it as part of the sentence.
- A status with no date in it. That is a lozenge.
Guidance
Do
12 Oct 2026
Use an appearance only when the date has a status, such as a deadline that has passed.
Don't
12/10/26
Do not use an ambiguous numeric format, and do not colour a date that has no status. Both leave people guessing.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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 status. The appearance shows it, so the text stays a date.