# Text (/docs/text)





`Text` renders a `<p>` with a kit-tuned size scale and a foreground shade switch (`c`). For headings, reach for [`Title`](/docs/title).

```tsx
import { Text } from '@42-central/ui-react/text';

<Text>Body paragraph.</Text>
<Text size="lg" c="muted">A bigger, quieter lead paragraph.</Text>
<Text size="sm" c="muted">Caption or metadata.</Text>
```

## Playground [#playground]

<story.Playground />

### Full prop browser [#full-prop-browser]

<story.WithControl />

## Sizes [#sizes]

<Preview align="block" code="&#x22;<Text size=\&#x22;xs\&#x22;>…</Text>\n<Text size=\&#x22;sm\&#x22;>…</Text>\n<Text size=\&#x22;md\&#x22;>…</Text>   {/* default */}\n<Text size=\&#x22;lg\&#x22;>…</Text>&#x22;">
  <div className="space-y-1">
    <Text size="xs">
      Extra-small — captions, microcopy.
    </Text>

    <Text size="sm">
      Small — secondary text under a heading.
    </Text>

    <Text size="md">
      Medium — default body scale.
    </Text>

    <Text size="lg">
      Large — lead paragraph, opening line of a section.
    </Text>
  </div>
</Preview>

## Heading-size aliases [#heading-size-aliases]

`size` also accepts `h1`..`h6` and `p` as friendlier names for the same scale (`h1` -> `4xl`, `h2` -> `3xl`, … `h6`/`p` -> `md`). These are visual-only — `Text` still always renders a `<p>` (or `<span>` with the `span` prop), never a heading element.

<Preview align="block" code="&#x22;<Text size=\&#x22;h2\&#x22;>…</Text>\n<Text size=\&#x22;h4\&#x22;>…</Text>\n<Text size=\&#x22;p\&#x22;>…</Text>   {/* same as size=\&#x22;md\&#x22; */}&#x22;">
  <div className="space-y-1">
    <Text size="h2">
      Sized like an h2, still a <p>.
    </Text>

    <Text size="h4">
      Sized like an h4.
    </Text>

    <Text size="p">
      Same as the default md size.
    </Text>
  </div>
</Preview>

## Color shade [#color-shade]

The `c` prop is a semantic toggle between the default foreground and two muted shades. It is **not** the palette `Color` — surfaces don't take accent colors.

<Preview align="block" code="&#x22;<Text>Default body text.</Text>\n<Text c=\&#x22;secondary\&#x22;>Secondary text — labels, section headings.</Text>\n<Text c=\&#x22;muted\&#x22;>Muted secondary text.</Text>&#x22;">
  <div className="space-y-1">
    <Text>
      Default foreground — for the main content.
    </Text>

    <Text c="secondary">
      Secondary foreground — for labels and section headings.
    </Text>

    <Text c="muted">
      Muted foreground — for captions and metadata.
    </Text>
  </div>
</Preview>

## Prefix slot [#prefix-slot]

The `prefix` slot is hidden from screen readers (`aria-hidden`) and unselectable (`select-none`) — safe for decorative leaders like `// ` without polluting copy-paste or assistive tech output.

<Preview code="`<Text prefix=&#x22;// &#x22;>A11y-safe decorative prefix.</Text>`">
  <Text prefix="// ">
    First-class a11y-safe decorations.
  </Text>
</Preview>

When `asChild` is used, the prefix slot is skipped — the consumer owns the inner structure.

## Rendering a `<span>` [#rendering-a-span]

Pass `span` when a `<p>` isn't valid HTML where `Text` is composed — e.g. nested inside a consumer's own paragraph, or inside another phrasing-content-only element. Same styling either way; only the tag changes.

<Preview code="`<Text span c=&#x22;muted&#x22;>Renders a <span> instead of a <p>.</Text>`">
  <Text c="muted">
    Renders a <span> instead of a <p>.
  </Text>
</Preview>

## Migrating from `Typography` [#migrating-from-typography]

The old `Typography` component shipped multiple variants in one place. Pick the new component that matches:

| Old usage                      | New usage                          |
| ------------------------------ | ---------------------------------- |
| `<Typography variant="h1" />`  | `<Title order={1} />`              |
| `<Typography variant="p" />`   | `<Text />`                         |
| `<Typography variant="lead">`  | `<Text size="lg" c="muted" />`     |
| `<Typography variant="small">` | `<Text size="sm" c="muted" />`     |
| `<Typography variant="code">`  | (Code component — Phase 2 roadmap) |
| `<Typography variant="kbd">`   | (Kbd component — Phase 2 roadmap)  |

## API [#api]

<TypeTable
  type="{
  size: {
    type: &#x22;'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'&#x22;,
    default: &#x22;'md'&#x22;,
    description: 'Visual scale — the same one Title uses. Maps to Tailwind text-* utilities. h1..h6/p are aliases for the same tokens.',
  },
  c: {
    type: &#x22;'default' | 'secondary' | 'muted'&#x22;,
    default: &#x22;'default'&#x22;,
    description: 'Foreground shade switch. Not a palette color.',
  },
  prefix: {
    type: 'ReactNode',
    description: 'Decorative prefix rendered inside the <p>. aria-hidden + unselectable. Ignored when asChild is true.',
  },
  span: {
    type: 'boolean',
    default: 'false',
    description: 'Renders a <span> instead of a <p> — same styling, for composing Text where a paragraph is not valid HTML.',
  },
  asChild: {
    type: 'boolean',
    default: 'false',
    description: 'Render children as the root element (Ark UI polymorphism).',
  },
}"
/>