Time

Components for displaying and composing media time information

Anatomy

<Time.Group>
  <Time.Value type="current" />
  <Time.Separator />
  <Time.Value type="duration" />
</Time.Group>

Displays a formatted time value (current, duration, or remaining).

Prop	Type	Default
`label`	`string \| function`	`''`
Description Custom label for accessibility. Type `string \| ((state: TimeState) => string)`
`negativeSign`	`string`	`'-'`
Description Symbol prepended to remaining time. Type `string`
`type`	`'current' \| 'duration' \| 'remaining'`	`'current'`
Description Which time value to display. Type `'current' \| 'duration' \| 'remaining'`

State is accessible via the render, className, and style props.

Property	Type
`type`	`'current' \| 'duration' \| 'remaining'`
Description Time display type. Type `'current' \| 'duration' \| 'remaining'`
`seconds`	`number`
Description Raw value in seconds. Type `number`
`text`	`string`
Description Formatted display text (e.g., "1:30"). Type `string`
`phrase`	`string`
Description Human-readable phrase (e.g., "1 minute, 30 seconds"). Type `string`
`datetime`	`string`
Description ISO 8601 duration (e.g., "PT1M30S"). Type `string`

Attribute	Description
`data-type`	The type of time being displayed.

Container for composed time displays. Renders a <span> element.

Divider between time values. Hidden from screen readers.