Text
Sizes s / m / l / xl / 2xl map to text.size.2 through text.size.6.
The typeface lives in text.font.family, which reads font.family.sans. Todae does not set font-family from it; apply var(--todae-text-font-family) where you want it.
Server Components can import it from @tounsoo/todae/text. That entry has no 'use client' and no hooks; the main @tounsoo/todae entry is a client module.
Small muted
Medium default
Large accent
tone="accent" follows color.accent.default. Todae's accent is neutral ink, so accent text looks like default text until a theme or company token package sets a brand accent.
Headings
as="h1" through as="h6" render a heading. A heading level picks a default size down the scale, bold weight and text.leading.tight, and balances its line breaks.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Choose the level for the page outline and size for the look. A heading that sits under an h1 stays an h2 even when it should look small:
A level 2 heading set small
The outline says h2; the size says it is a quiet section label.
When to use
When: Body text and headings on the token scale: size s through 2xl, tone default / muted / accent, weight; as p / span / strong / h1–h6.
When not: Field names → Label. A group of controls' name → Fieldset.Legend. Hints and errors → Description / ErrorMessage. Dialog heading → Dialog.Title.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| as | "p" | "span" | "strong" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | no | "p" | Rendered element. A heading level sets the outline; it also picks a default size, bold weight and tight leading. |
| size | "s" | "m" | "l" | "xl" | "2xl" | no | "m"; for headings h1 "2xl", h2 "xl", h3 "l", h4 and h5 "m", h6 "s" | Maps to text.size.2 through text.size.6. Set it to make a heading look larger or smaller than its level. |
| tone | "default" | "muted" | "accent" | no | "default" | Foreground role. accent follows color.accent.default, which is neutral ink in Todae, so it matches default until a theme sets a brand accent. |
| weight | "regular" | "medium" | "bold" | no | "regular"; "bold" for headings | Font weight. |
| children | React.ReactNode | no | — | Text content. |