Text is used to visually style and provide semantic value for a small piece of text content.




optional = ?

Name Type Description
size? "auto" | "fill" | number Size of the text
emphasized? boolean
subdued? boolean
role? "address" | "deletion" | AbbreviationRoleType | DirectionalOverrideRoleType | DatetimeRoleType Assign semantic value
id? string Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action.
appearance? "critical" | "warning" | "success" Changes the visual appearance


Indicate the text is a date, a time or a duration. Use the "machineReadable" option to help browsers, tools or software understand the human-readable date. Valid format for "machineReadable" can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#Valid_datetime_Values

Name Type Description
type "datetime"
machineReadable? string


Override the text directionality. Typically used for email and phone numbers.

Name Type Description
type "directional-override"
direction "ltr" | "rtl"


Indicate the text is an abbreviation or acronym. Use the "for" option to provide a description of the abbreviation.

Name Type Description
type "abbreviation"
for? string

On this page