Text
Text renders body copy from the shared type scale. It carries no layout of its own beyond alignment and truncation, so it drops into a card, a form, or a table cell without fighting the surrounding grid.
Behavior you can trust, styling you can own.
Manti UI keeps interaction logic in framework-agnostic machines and ships the look as design tokens.
Updated a few minutes ago.
By default it renders a <p>. Use as when the element should be something
else — a <span> inside a sentence, a <label> beside a field, an <li> in a
list. The styling stays identical; only the semantics change.
Size and weight
size selects a stop on the same scale the tokens expose, from xs through
5xl. Line height and tracking tighten automatically as the size grows, because
body leading on a display size reads as loose rather than generous.
xs — the quick brown fox
sm — the quick brown fox
base — the quick brown fox
lg — the quick brown fox
xl — the quick brown fox
2xl — the quick brown fox
3xl — the quick brown fox
Weight rides the same prop, after a slash:
<Text size="lg" /> // stop only
<Text size="lg/semibold" /> // stop and weightThe two halves are not equivalent. Writing the stop alone leaves the weight to
the stylesheet, so a consumer who decides that lg means semibold in their
system says it once in CSS instead of at every call site:
[data-scope='text'][data-part='root'][data-size='lg'] {
--manti-text-weight: var(--manti-weight-semibold);
}Spelling out lg/regular overrides that again at the call site.
Emphasis
emphasis walks the neutral ladder. It answers "how loud is this line?", not
"what color is it": all three rungs stay neutral and are contrast-checked in
both themes.
Default — the sentence a reader is meant to finish.
Muted — supporting detail beside it.
Subtle — metadata that should not compete.
Variant
variant is the separate, semantic color axis. Because the two axes are
independent, a message can be red and quiet at the same time. When both are
set, variant wins.
Danger — this payment could not be captured.
Success — the invoice was sent.
Info — changes sync every few minutes.
Emphasis and variant are separate axes, so this danger note stays quiet.
Truncation
truncate clamps to a single line with an ellipsis; lineClamp clamps to a
given number of lines. Setting both leaves lineClamp in charge.
A single-line title that runs well past the width of its card
Manti UI keeps behavior in framework-agnostic machines and ships the look as tokens, so a component can be restyled without forking it or reaching into its internals.
API
Text accepts every native attribute of whatever element as resolves to, in
addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | 'p' | Element to render. The styling is unchanged. |
size | TextScale | `${TextScale}/${TextWeight}` | 'base' | Type-scale stop, optionally with a weight after a slash: "lg" or "lg/semibold". Omitting the weight keeps whatever the stylesheet decides for that stop. |
emphasis | 'default' | 'muted' | 'subtle' | 'default' | Neutral emphasis ladder: body copy, supporting detail, or metadata. |
variant | MantiVariant | — | Semantic color. Wins over emphasis when both are set. |
align | 'start' | 'center' | 'end' | 'justify' | — | Text alignment. |
truncate | boolean | false | Clamp to a single line with an ellipsis. Ignored when lineClamp is set. |
lineClamp | number | — | Clamp to this many lines with an ellipsis. |
Styling
Anatomy
| Part | Selector | Description |
|---|---|---|
root | [data-scope="text"][data-part="root"] | The rendered text element (a <p> unless `as` says otherwise). |
Tokens
| Token | Controls |
|---|---|
--manti-text-font-size | font size |
--manti-text-line-height | line height |
--manti-text-weight | weight |
--manti-text-tracking | tracking |
Last updated