Text

A typography component for body text, descriptions, and inline content. Supports size, color variant, weight, alignment, and text truncation.

Reach for <x-wirekit::text> 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.

Sandbox Live preview

Body copy renders with the active font preset and design-token line height.

<x-wirekit::text>Body copy renders with the active font preset and design-token line height.</x-wirekit::text>

Basic Usage

Default text

This is a paragraph of body text styled with WireKit design tokens.

<x-wirekit::text>This is a paragraph of body text styled with WireKit design tokens.</x-wirekit::text>

Sizes

Text sizes

Extra small text (xs)

Small text (sm)

Base text (base)

Large text (lg)

Extra large text (xl)

<x-wirekit::stack gap="xs">
    <x-wirekit::text size="xs">Extra small text (xs)</x-wirekit::text>
    <x-wirekit::text size="sm">Small text (sm)</x-wirekit::text>
    <x-wirekit::text size="base">Base text (base)</x-wirekit::text>
    <x-wirekit::text size="lg">Large text (lg)</x-wirekit::text>
    <x-wirekit::text size="xl">Extra large text (xl)</x-wirekit::text>
</x-wirekit::stack>

Color Variants

Text variants

Default text

Muted text

Subtle text

Accent text

Success text

Warning text

Danger text

<x-wirekit::stack gap="xs">
    <x-wirekit::text variant="default">Default text</x-wirekit::text>
    <x-wirekit::text variant="muted">Muted text</x-wirekit::text>
    <x-wirekit::text variant="subtle">Subtle text</x-wirekit::text>
    <x-wirekit::text variant="accent">Accent text</x-wirekit::text>
    <x-wirekit::text variant="success">Success text</x-wirekit::text>
    <x-wirekit::text variant="warning">Warning text</x-wirekit::text>
    <x-wirekit::text variant="danger">Danger text</x-wirekit::text>
</x-wirekit::stack>

Font Weight

Weight options

Normal weight

Medium weight

Semibold weight

Bold weight

<x-wirekit::stack gap="xs">
    <x-wirekit::text weight="normal">Normal weight</x-wirekit::text>
    <x-wirekit::text weight="medium">Medium weight</x-wirekit::text>
    <x-wirekit::text weight="semibold">Semibold weight</x-wirekit::text>
    <x-wirekit::text weight="bold">Bold weight</x-wirekit::text>
</x-wirekit::stack>

Alignment

Text alignment — each row is a full-width container so the alignment is visible

Left-aligned text

Center-aligned text

Right-aligned text

<x-wirekit::stack gap="xs" style="width: 100%; max-width: 36rem;">
    <x-wirekit::text align="left" style="outline: 1px dashed var(--color-wk-border-subtle); outline-offset: -1px; padding: 0.375rem 0.625rem;">Left-aligned text</x-wirekit::text>
    <x-wirekit::text align="center" style="outline: 1px dashed var(--color-wk-border-subtle); outline-offset: -1px; padding: 0.375rem 0.625rem;">Center-aligned text</x-wirekit::text>
    <x-wirekit::text align="right" style="outline: 1px dashed var(--color-wk-border-subtle); outline-offset: -1px; padding: 0.375rem 0.625rem;">Right-aligned text</x-wirekit::text>
</x-wirekit::stack>

Truncation

Truncated text

This is a very long paragraph of text that will be truncated with an ellipsis when it overflows its container width.

<x-wirekit::container max="sm">
    <x-wirekit::text :truncate="true">This is a very long paragraph of text that will be truncated with an ellipsis when it overflows its container width.</x-wirekit::text>
</x-wirekit::container>

Line Clamping

Line clamp to 2 lines

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.

<x-wirekit::container max="sm">
    <x-wirekit::text :lineClamp="2">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.</x-wirekit::text>
</x-wirekit::container>

Inline Text

Use as="span" for inline text within other elements.

Inline text in a row

Price: $49.99

<x-wirekit::row gap="xs">
    <x-wirekit::text as="span" weight="semibold">Price:</x-wirekit::text>
    <x-wirekit::text as="span" variant="accent" weight="bold">$49.99</x-wirekit::text>
</x-wirekit::row>

Props

Prop	Type	Default	Description
`size`	string	`'base'`	Font size: `xs`, `sm`, `base`, `lg`, `xl`
`variant`	string	`'default'`	Color: `default`, `muted`, `subtle`, `accent`, `success`, `warning`, `danger`
`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`, `medium`, `semibold`, `bold`
`align`	string\|null	`null`	Text alignment: `left`, `center`, `right`
`truncate`	bool	`false`	Single-line truncation with ellipsis
`lineClamp`	int\|null	`null`	Clamp to N lines
`as`	string	`'p'`	HTML element: `p`, `span`, `div`
`scope`	string\|null	`null`	Scoped personalization name

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

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)
`--text-wk-xs` through `--text-wk-xl`	Font sizes
`--color-wk-text`	Default color
`--color-wk-text-muted`	Muted variant
`--color-wk-text-subtle`	Subtle variant
`--color-wk-accent`	Accent variant
`--color-wk-success-text`	Success variant
`--color-wk-warning-text`	Warning variant
`--color-wk-danger-text`	Danger variant

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.

Text

Was this page helpful?