Text
A typography component for body text, descriptions, and inline content. Supports size, color variant, weight, alignment, and text truncation.
Reach for <x-wirekit:: instead of a raw <p> for body copy. It applies the WireKit type ramp (font family, line height, letter spacing) and the correct --color-wk-text-* token for each variant, so your copy stays consistent across every theme — a hand-written <p class="text-sm text-gray-600"> hardcodes the color and drops the ramp.
Live Sandbox
This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.
Body copy renders with the active font preset and design-token line height.
Basic Usage
This is a paragraph of body text styled with WireKit design tokens.
Sizes
Extra small text (xs)
Small text (sm)
Base text (base)
Large text (lg)
Extra large text (xl)
Color Variants
Default text
Muted text
Subtle text
Accent text
Success text
Warning text
Danger text
Font Weight
Normal weight
Medium weight
Semibold weight
Bold weight
Alignment
Left-aligned text
Center-aligned text
Right-aligned text
Truncation
This is a very long paragraph of text that will be truncated with an ellipsis when it overflows its container width.
Truncation With a Tooltip
truncate="tooltip" cuts the line the same way and shows the whole text in a tooltip while, and only while, it is cut. Point at the first row's name or code to read it in full. The second row fits, so it shows nothing. The check runs every time the tooltip would show, so a text that a narrower window cuts gains its tooltip, and one that a wider window lets fit loses it.
Every reader gets the whole text:
- Pointer: hovering the text shows the tooltip, and it stays while the pointer rests on it.
- Keyboard: the tooltip shows when the link or button the text stands in takes the keyboard focus. A row with two cut texts shows both. A cut text that stands in no control becomes a tab stop of its own while it is cut, and stops being one once it fits.
- Touch: a long press shows it. On a touch screen a cut text that stands in no control is at least 24px tall while it is cut, with its line in the middle, so a finger can hit it; a text that fits keeps its own height.
- Screen readers read the whole text from the element itself, once. The tooltip only repeats it for the eye, so it is hidden from them.
Escape dismisses the tooltip. Its placement, offset and delays are the site's tooltip settings, set as described under Tooltip customization.
Two things to know when you build with it:
- A text is cut only where its container gives it a width. In a flex row, the element that is the flex item needs
min-width: 0, or the line widens the row instead of being cut. - Text that Alpine writes goes on an element inside the component.
x-texton the component itself replaces everything inside it, the tooltip included. Write<x-wirekit::instead.text truncate="tooltip"><span x-text="name"></span></x-wirekit:: text>
Line Clamping
This is a longer paragraph that will be clamped to exactly two lines. Any content beyond the second line will be hidden and replaced with an ellipsis. This is useful for card descriptions and previews.
Breaking Long Tokens
A checksum, an API key or a long URL is one unbroken token. It has no space to wrap at, so it widens its container instead, and on a phone the whole page slides sideways. Truncating it hides characters a reader may need, so set break to let it wrap.
Report checksum
sha512:cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e
anywhere is the value to reach for: it breaks a line only where the line would otherwise overflow, so ordinary words still wrap between words. all breaks between any two characters, including inside ordinary words, which suits a column of identifiers better than a sentence. normal restores the default rules where an ancestor set different ones. break has no effect together with truncate, which keeps the text on a single line.
A Second Line in a Cell
The line under a value in a list, a date under an order number or the net amount under a total,
stands close to the line it belongs to and keeps a row one line tall on a phone. leading="tight"
sets the tight line height, and :wrap="false" keeps the text on one line without cutting it,
where truncate would cut it with an ellipsis:
Where the second lines of a column carry figures, a date, an amount or a count, family="mono"
sets them in the monospaced face and tabular gives every digit one width, so the figures line up
from row to row:
Fitting the Line
A figure in a narrow column, a long price or a count, can shrink to fit its line instead of breaking or running out, with fit. With :wrap="false" it stays on one line and shrinks down to its floor; a text that may wrap takes the fewest lines its floor needs, at the largest size that keeps them. fit alone uses the --text-wk-fit-floor token, three quarters of the text's size, and a length such as fit="0.5rem" sets a floor of its own. How the fitting works and what it costs is on the Fit Text page.
1.234.567,89 €
1.234.567,89 €
A text that truncate or lineClamp cuts keeps its size: the cut keeps it inside its box, where a fitted text on one line runs past it below its floor. fit beside either is reported in development, and the cut applies.
A Reading Width
Running text that stands on its own, such as the introduction under a page's title, keeps to a
reading width with measure: default stops at about 65 characters and wide at about 78, as
prose does. Without it, text runs as wide as its container, which is right in
a table cell, a card or a button. The description of a page header keeps
to the wide measure on its own.
Withdraw from a contract
Withdraw from a contract you concluded with us online within fourteen days, without giving a reason. Choose the contract below, and we confirm your withdrawal by email the moment you send it.
Inline Text
Use as="span" for inline text within other elements.
Inside a Control
A text inside a link, a tab or a button should look like the control: its color, its size and its weight, and the color the control takes under the pointer, on focus or as the current page. inherit on intent, size, weight, family and leading writes no class for that axis, so the text takes each one from the control and follows its states with it. Without it the text keeps the theme's text color while the link around it turns to its accent.
Each axis inherits on its own, so a text can keep the control's color and still set its own size. The overflow nav cuts the label of an entry this way.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size |
string | 'base' |
Font size: xs, sm, base, lg, xl, or inherit for the size around it. See Inside a Control |
variant |
string | 'default' |
Color: default, muted, subtle, accent, success, warning, danger, or inherit for the color around it |
intent |
string|null | null |
Canonical name for the color axis, accepting the same values as variant. Falls back to variant when omitted, and wins over it when both are given. |
weight |
string | 'normal' |
Weight: normal (the theme's body weight, --font-wk-body-weight), medium, semibold, bold, or inherit |
align |
string|null | null |
Text alignment: left, center, right |
truncate |
bool|string | false |
Single-line truncation with ellipsis. 'tooltip' also shows the whole text in a tooltip while it is cut. See Truncation With a Tooltip |
lineClamp |
int|null | null |
Clamp to N lines, 1–6 |
break |
string|null | null |
Where an unbroken token such as a checksum or a URL may wrap: anywhere breaks only where the line would overflow, all between any two characters, normal restores the default rules. See Breaking Long Tokens |
leading |
string|null | null |
Line height: tight, normal, relaxed, on the leading tokens, or inherit. null keeps the theme's line height. See A Second Line in a Cell |
wrap |
bool | true |
false keeps the text on one line without cutting it; truncate cuts it with an ellipsis instead |
fit |
bool|string|null | null |
Shrinks the text down to a floor so it fits its line, or the fewest lines the floor needs while it may wrap: true for the --text-wk-fit-floor token, or a length such as 0.75em. Not beside truncate or lineClamp. See Fitting the Line |
family |
string | 'sans' |
Typeface: sans, the body face, mono, which reads --font-wk-mono and drops the body face's letter spacing, or inherit |
tabular |
bool | false |
Figures of one width, so a column of amounts, dates or counts lines up digit for digit |
measure |
default|wide|none|null |
null |
A reading width: default about 65 characters, wide about 78, as on prose. null and none run as wide as the container. See A Reading Width |
as |
string | 'p' |
HTML element: p, span, div |
scope |
string|null | null |
Scoped personalization name |
Keyboard Interaction
| Key | Action |
|---|---|
Tab |
With truncate="tooltip", reaches a cut text that stands in no control, while it is cut, and shows its tooltip. A text inside a link or a button shows its tooltip when that control takes the focus |
Escape |
Dismisses the tooltip |
Without truncate="tooltip" the text is never a tab stop.
Design Tokens
| Token | Used for |
|---|---|
--font-wk-sans |
Font family |
--font-wk-letter-spacing |
Letter spacing |
--font-wk-line-height |
Line height (fallback: 1.5) |
--leading-wk-tight / --leading-wk-relaxed |
Line height for leading="tight" / "relaxed" |
--font-wk-body-weight |
Weight for weight="normal" |
--text-wk-xs through --text-wk-xl |
Font sizes |
--measure-wk / --measure-wk-wide |
The reading width of measure="default" / "wide" |
--text-wk-fit-floor |
The floor of a text with fit and no floor of its own, 0.75em |
--color-wk-text |
Default color |
--color-wk-text-muted |
Muted variant |
--color-wk-text-subtle |
Subtle variant |
--color-wk-accent-text |
Accent variant |
--color-wk-success-text |
Success variant |
--color-wk-warning-text |
Warning variant |
--color-wk-danger-text |
Danger variant |
--color-wk-tooltip-bg / --color-wk-tooltip-text |
The tooltip of truncate="tooltip", as on Tooltip |
--size-wk-tooltip-max |
The tooltip's widest line; a long code breaks inside it |
--z-wk-tooltip |
The tooltip's layer |
--ring-wk-width / --color-wk-ring |
The focus ring of a cut text's own tab stop |
Usage & Conventions
Prop conventions — this component uses one or more of the shared semantic prop names (
intent/variant/tone/surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.