Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Primitives
  2. Time
  3. Usage

Time

Usage

Overview

Time pairs a machine-readable dateTime with a human-readable label, so a visible date or time stays perceivable by assistive tech and structured-data tooling. It carries no typography or visual styling of its own.

When to use

  • A displayed date or time that should also carry a machine-readable value, e.g. a message send time or an activity timestamp.
  • Any place a raw <time> element would otherwise be reached for directly.

When not to use

  • Plain styled text with no machine-readable instant - use Text instead.
  • A value that needs typography (size, color, weight): compose CoreText around Time, since CoreText has no as/asChild escape hatch and cannot render <time> itself.

Variants

None. Time is a single, unstyled wrapper - it does not offer size, color, or weight variants.

Anatomy

A <time> element carrying the dateTime attribute, the forwarded className, and a forwarded ref. children is the visible, human-readable label.

Content guidelines

  • dateTime should be a valid machine-readable instant, e.g. an ISO 8601 timestamp, and should correspond to the same moment the visible label describes.
  • children should be the localized, human-readable label already formatted for the product's date/time conventions - Time does not format or localize its content.

Behavior and states

Time is not interactive and has no states.

Best practices

  • Do keep dateTime and the visible label describing the same instant - a mismatch misleads assistive tech and structured-data consumers even when the visible text looks correct.
  • Do compose CoreText around Time when the label needs typography.
  • Don't use Time for a value that has no underlying machine-readable instant - use Text/CoreText instead.
  • Don't apply typography classes directly to Time - wrap it instead of styling it.

Accessibility

  • The visible children is what assistive tech announces; the dateTime attribute is not read aloud, so the label alone must convey the meaning.
  • Prefer an unambiguous, localized label (e.g. a full date or time) over a bare machine format so sighted and screen reader users get the same information.

Related Components

  • Text for styled text with no machine-readable instant.

Previous

Theme / Accessibility

Next

Time / API and Development

On this page

Overview
When to use
When not to use
Variants
Anatomy
Content guidelines
Behavior and states
Best practices
Accessibility
Related Components