On this page
Overview
Show code, DraftSaved.tsx
Past moments read ago, coming ones in.
Show code, PastAndComing.tsx
Variants
- Long
Text and most lists. The default.
Reads as: 3 hours ago
- Short
Dense lists and table cells.
Reads as: 3 hr. ago
- Narrow
Toolbars and other tight spots.
Reads as: 3h ago
Show code, Formats.tsx
Text for a label
The same text comes as plain text too, for a place that takes only text, such as an option's label. It doesn't update by itself.
Show code, VersionLabels.tsx
Anatomy
Time
Show code, RelativeTimeAnatomy.tsx
Behaviour
Rounding and languages
The text rounds to the nearest unit and stays a count: 1 day ago, never yesterday.
- It speaks the application's language, else the browser's, or one of its own, such as German: vor 3 Stunden.
- Where the exact moment shows nearby, it can leave out its tooltip.
Rules
The words around a relative time say what happened, and the exact date shows where it matters.
Use it when
- How long ago or how soon, more than the exact moment, such as a review due
- Times that stay current while the page is open, such as Draft saved 2 minutes ago
- How long ago as plain text, such as in an option's label
Show code, ExactDateNearby.tsx
Accessibility
| Key | Action |
|---|---|
| Esc | Closes the tooltip opened by hovering. |