The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Time

Added in v4.15.0

The Time component displays dates and times in a consistent format.

The Time component exists only in code. The Figma equivalent would be a manually input text object with a formatted string. For writing guidelines related to this component, read our content Date and Time section.

How to use this component

The Time component is used to display dates and times in a consistent format.

Basic invocation with default time format display

The Time component displays dates using “friendly local” format by default which includes the abbreviated month name and the time of day along with the local timezone. A Tooltip is also included which by default displays the time in ISO UTC format. Set hasTooltip to false to turn off tooltip display.

The component does not include text styling so will inherit text styles from the context in which it is used.

Single time

The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Time

Added in v4.15.0

The Time component displays dates and times in a consistent format.

The Time component exists only in code. The Figma equivalent would be a manually input text object with a formatted string. For writing guidelines related to this component, read our content Date and Time section.

How to use this component

The Time component is used to display dates and times in a consistent format.

Basic invocation with default time format display

The Time component displays dates using “friendly local” format by default which includes the abbreviated month name and the time of day along with the local timezone. A Tooltip is also included which by default displays the time in ISO UTC format. Set hasTooltip to false to turn off tooltip display.

The component does not include text styling so will inherit text styles from the context in which it is used.

Single time