---
title: Text
description: Body text with size, variant, and weight
visibility: guest
draft: false
---

# 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.

:::preview{title="Sandbox" sandbox="text" props='{"size":"base","variant":"default","body":"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

:::preview{title="Default text"}
<x-wirekit::text>This is a paragraph of body text styled with WireKit design tokens.</x-wirekit::text>
:::

## Sizes

:::preview{title="Text sizes"}
<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

:::preview{title="Text variants"}
<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

:::preview{title="Weight options"}
<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

:::preview{title="Text alignment — each row is a full-width container so the alignment is visible"}
<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

:::preview{title="Truncated text"}
<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

:::preview{title="Line clamp to 2 lines"}
<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.

:::preview{title="Inline text in a row"}
<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](/extending/prop-naming-conventions) for the canonical vocabulary, alias matrix, and decision tree.