Custom label to be used by screen readers. When provided, an aria-label will be added to the element.
"a user friendly label for screen readers"
How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.
"start"
"center"
"end"
"stretch"
The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side. For vertical margin to be applied, Text needs to be contained within a layout component (such as Box or a generic div) or behave as a div (by applying as="div" or a display style of inline-block).
"xsmall"
"small"
"medium"
"large"
"xlarge"
{
"vertical": "...",
"horizontal": "...",
"top": "...",
"bottom": "...",
"left": "...",
"right": "..."
}
The DOM tag to use for the element. NOTE: This is deprecated in favor of indicating the DOM tag via the 'as' property.
Restrict the text to a single line and truncate with ellipsis if it is too long to all fit. For truncate to be applied, Text needs to be contained within a layout component (such as Box or a generic div).
The text color used for Text. In order for this to take effect, global.colors.background needs to be defined.
{"dark": "#f8f8f8", "light": "#444444"}
The possible sizes of the text in terms of its font-size and line-height.
{
"font": {},
"xsmall": {
"size": "12px",
"height": "18px",
"maxWidth": "288px"
},
"small": {
"size": "14px",
"height": "20px",
"maxWidth": "336px"
},
"medium": {
"size": "18px",
"height": "24px",
"maxWidth": "432px"
},
"large": {
"size": "22px",
"height": "28px",
"maxWidth": "528px"
},
"xlarge": {
"size": "26px",
"height": "32px",
"maxWidth": "624px"
},
"xxlarge": {
"size": "34px",
"height": "40px",
"maxWidth": "816px"
},
"2xl": {
"size": "34px",
"height": "40px",
"maxWidth": "816px"
},
"3xl": {
"size": "42px",
"height": "48px",
"maxWidth": "1008px"
},
"4xl": {
"size": "54px",
"height": "60px",
"maxWidth": "1296px"
},
"5xl": {
"size": "70px",
"height": "76px",
"maxWidth": "1680px"
},
"6xl": {
"size": "90px",
"height": "96px",
"maxWidth": "2160px"
}
}