Text
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 |
DatetimeRoleType
Anchor link to section titled "DatetimeRoleType"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 |
DirectionalOverrideRoleType
Anchor link to section titled "DirectionalOverrideRoleType"Override the text directionality. Typically used for email and phone numbers.
| Name | Type | Description |
|---|---|---|
| type | "directional-override" |
|
| direction | "ltr" | "rtl" |
AbbreviationRoleType
Anchor link to section titled "AbbreviationRoleType"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 |