Text
Body copy at one of ten steps. Anything that is a heading belongs in Heading, which takes a level rather than an element.
Size
Use size to pick one of ten steps. 1 is 12px, 10 is 24px.
size={10}24/30A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={9}22/28A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={8}20/25A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={7}18/23A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={6}17/22A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={5}16/21A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={4}15/20A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={3}14/19A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={2}13/18A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
size={1}12/16A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
<Text size={10} truncate>{SAMPLE}</Text><Text size={9} truncate>{SAMPLE}</Text><Text size={8} truncate>{SAMPLE}</Text><Text size={7} truncate>{SAMPLE}</Text><Text size={6} truncate>{SAMPLE}</Text><Text size={5} truncate>{SAMPLE}</Text><Text size={4} truncate>{SAMPLE}</Text><Text size={3} truncate>{SAMPLE}</Text><Text size={2} truncate>{SAMPLE}</Text><Text size={1} truncate>{SAMPLE}</Text>Weight
Use weight for emphasis: 400, 500 or 700.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
<Text weight="regular">{SAMPLE}</Text><Text weight="medium">{SAMPLE}</Text><Text weight="bold">{SAMPLE}</Text>Leading
Use leading="reading" to open the line height for a paragraph. It affects steps 3 to 6, the sizes a paragraph is run at.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here. Change any one of the three and the other two still stand. That is the test this structure has to pass, and it is why the styled components are a package rather than the point.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here. Change any one of the three and the other two still stand. That is the test this structure has to pass, and it is why the styled components are a package rather than the point.
<Text leading="normal">{PARAGRAPH}</Text><Text leading="reading">{PARAGRAPH}</Text>Color
Use color to name a role. There is no palette step here, on purpose.
strong
normal
assistive
link
accent
success
warning
error
<Text color="strong">strong</Text><Text color="normal">normal</Text><Text color="assistive">assistive</Text><Text color="link">link</Text><Text color="accent">accent</Text><Text color="success">success</Text><Text color="warning">warning</Text><Text color="error">error</Text>Overflow
Use truncate for one line, or lines to clamp to a number of them.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
A design system is a device for making each decision once. Color once in the tokens, the focus trap once in the base layer, what a button looks like once here.
<Text truncate>{SAMPLE}</Text><Text lines={2}>{SAMPLE}</Text><Text lines={3}>{SAMPLE}</Text>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
size | 1 – 10 | 5 | 1 is 12px, 10 is 24px. Above that, it is a heading. |
weight | 'regular' | 'medium' | 'bold' | 'regular' | 400, 500, 700. |
leading | 'normal' | 'reading' | 'normal' | reading keeps the size and opens the line height. Affects steps 3 to 6. |
color | strong | normal | assistive | inverse | link | accent | success | warning | error | inherit | 'normal' | Semantic roles only. inherit takes the color of whatever it sits in, for text inside something that has already picked one. |
align | 'left' | 'center' | 'right' | 'justify' | — | |
as | ElementType | 'p' | The element. Pick what the content is. |
truncate | boolean | false | One line, then an ellipsis. |
lines | number | — | Clamp to this many lines. Ignored when truncate is set. |