Text

Text renders a run of text in one of the system's type roles. The look (variant) and the element (as) are set separately.

Stable

Figma

Overview

Usage

API

Accessibility

Billing history

Your plan renews on 27 March 2026.

Prices include VAT.

<tk-text variant="title-md" as="h3">Billing history</tk-text>
<tk-text>Your plan renews on 27 March 2026.</tk-text>
<tk-text variant="caption" color="secondary">Prices include VAT.</tk-text>

Anatomy

Part	What it is
`tk-text`	the element; renders the tag you choose with `as`
default slot	the text, required; it is also the accessible name
`text` part	the rendered element inside

Variants

Display Small

Title Small

Heading Medium

Body Medium

Label Medium

Code Small

<tk-text variant="display-sm">Display Small</tk-text>
<tk-text variant="title-sm">Title Small</tk-text>
<tk-text variant="heading-md">Heading Medium</tk-text>
<tk-text variant="body-md">Body Medium</tk-text>
<tk-text variant="label-md">Label Medium</tk-text>
<tk-text variant="code-sm">Code Small</tk-text>

variant is the type role. Size, line height, weight, and family come from it.

`variant`	Size / line height	Weight
`display-lg`	64 / 72	600
`display-md`	48 / 56	600
`display-sm`	40 / 48	600
`title-lg`	32 / 40	600
`title-md`	28 / 32	600
`title-sm`	24 / 28	600
`heading-md`	20 / 24	600
`heading-sm`	18 / 24	600
`body-lg`	18 / 28	400
`body-md` (default)	16 / 24	400
`body-sm`	14 / 20	400
`label-lg`	16 / 24	500
`label-md`	14 / 20	500
`label-sm`	12 / 16	500
`caption`	12 / 16	400
`code-md`	16 / 24	400, mono
`code-sm`	14 / 20	400, mono

Display: promo headlines. Title: page and section headings. Heading: short headings inside a block.
Body: running text. Label: UI text. Caption: quiet supporting text.
Code: machine text in the mono family.

Element

Billing history

Welcome back

<tk-text variant="title-md" as="h3">Billing history</tk-text>
<tk-text variant="body-lg" as="h2">Welcome back</tk-text>

as sets the real HTML element: p (default), span, div, label, code, or h1–h6. Screen readers and heading navigation see that element.

Pick the heading level from the page outline, then pick the variant that looks right. One h1 per page; don't skip levels.
span and code are inline; use them to style a phrase inside other text.
as="code" doesn't change the font. Pair it with code-md or code-sm.
as="label" doesn't label a form control. Use Field for that.

Color

Last edited by Ada

Payment received

Card declined

<tk-text color="secondary">Last edited by Ada</tk-text>
<tk-text color="success">Payment received</tk-text>
<tk-text color="error">Card declined</tk-text>

color takes a text role, so it works in every theme.

`color`	Use for
`default` (default)	main reading text
`secondary`	supporting text
`tertiary`	the least important text
`accent`	emphasis in the accent color; not clickable
`success` / `warning` / `error` / `info`	status text
`inverse`	text on an inverse (dark) surface

Use a status color for that status only, not for decoration. Placeholder, disabled, and on-fill colors aren't offered; the components that need them set them.

Weight, alignment, truncation, italic

This word is important.

Centered text

Photo by the author

Quarterly report for the north-east region, final draft

<tk-text>This word is <tk-text as="span" weight="bold">important</tk-text>.</tk-text>
<tk-text align="center">Centered text</tk-text>
<tk-text italic color="secondary">Photo by the author</tk-text>
<div style="max-inline-size: 16rem">
  <tk-text truncate>Quarterly report for the north-east region, final draft</tk-text>
</div>

weight: regular (400), medium (500), semibold (600), or bold (700). Only the weight changes. Use it for a bold word in body text, not to fake a heading.
align: start, center, or end; they follow the writing direction. Unset, the text inherits the container's alignment.
truncate: one line with an ellipsis. It needs a bounded width. Screen readers still read the full text; if sighted readers need it, add a Tooltip.
italic: the whole run in italic, as styling only. For stress inside a sentence, use <em>.

Text has no outer margins. Spacing between blocks is the layout's job, or use Prose.

When to use

Use Text for every run of content text: paragraphs, headings, labels, captions, inline code.
Use as for the element and variant for the look. A real <h2> can look like Title Medium. There is no separate heading component.
Use Prose for a block of authored content, such as an article or help text, where the spacing between paragraphs matters.
Use a Link or a Button for clickable text, never a Text with a click handler.

Do / Don't

✅ Do	❌ Don't
Pick `as` from the outline and `variant` from the design	Let the visual size decide the heading level
Use a real `h2` for a section heading	Fake a heading with a large body run
Use `weight="bold"` for a bold word	Use a heading element to get bold text
Use `color="error"` for error text	Use a status color for decoration
Let text wrap	Truncate text the reader needs without a way to see it
Use a Link for navigation	Put a click handler on a Text

Prose: authored content with paragraph spacing, lists, and quotes.
Link: text that navigates.
Code block: multi-line code; Text with code-* covers inline code.
Kbd: a keyboard key.
Page header: a page title and description built from Text.

API

Attributes

Attribute	Type	Default	What it does
`variant`	one of the 17 roles above	`body-md`	the type role
`as`	`p` \| `span` \| `div` \| `label` \| `code` \| `h1`–`h6`	`p`	the rendered element; an unknown value renders `p`
`weight`	`regular` \| `medium` \| `semibold` \| `bold`	the role's weight	overrides the weight only
`color`	`default` \| `secondary` \| `tertiary` \| `accent` \| `success` \| `warning` \| `error` \| `info` \| `inverse`	`default`	the text color role
`align`	`start` \| `center` \| `end`	inherited	text alignment
`truncate`	boolean	`false`	one line with an ellipsis
`italic`	boolean	`false`	italic for the whole run

Slots

Slot	Content
default	the text, required; inline markup such as `<strong>` or a nested `tk-text as="span"` is fine

Events

None. Text isn't interactive.

CSS

::part(text): the rendered element.

Tokens

Each variant uses its type role from Typography: font family, weight, size, line height, and letter spacing. Each color value uses the matching text/* token (color="error" → text/error). Values per theme: Color.

Accessibility

Built in:

as renders the real element, so a heading has its true role and level.
No ARIA is added; the native element carries the meaning.
The full text stays the accessible name, even when truncate clips it.
color offers only readable text roles.

Your part:

Set as from the page outline: one h1, no skipped levels.
Don't fake a heading with a big variant, and don't use a heading element just for bold text.
Use a Link or a Button for clickable text.
With truncate, give sighted readers a way to see the full text when it matters.

Anatomy

Variants

Element

Color

Weight, alignment, truncation, italic

When to use

Do / Don't

Related

API

Attributes

Slots

Events

CSS

Tokens

Accessibility