# Text

> Body copy with a size scale and semantic colours. Renders p, span, or div.

URL: https://apogee.avaui.dev/docs/text
Last updated: 2026-10-15

Body copy with a size scale and semantic colours. Renders p, span, or div.

Last updated October 15, 2026

```astro
<Text>Body copy at the base size.</Text>
<Text color="neutral-faded">Muted secondary copy.</Text>
```

## Add

```sh
npx @ava-ui/apogee add text
```

No Apogee dependencies.

## Usage

```astro
---
import Text from '@/components/apogee/Text/Text.astro'
---
<Text>Body copy.</Text>
```

## API

`@composable` — exposed to Content Editors in AVA. Any other native attribute for the rendered tag (e.g. `id`, `aria-label`) passes through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `'p' \| 'span' \| 'div' \| 'label' \| 'li' \| 'strong' \| 'em' \| 'small'` | `'p'` | Element rendered. |
| `size` | `'small' \| 'medium' \| 'large'`, responsive | `'medium'` | Font size: 14 / 16 / 18px; `{ base: 'small', md: 'medium' }` per breakpoint. |
| `weight` | `'regular' \| 'medium' \| 'semibold' \| 'bold'` | `'regular'` | Font weight. |
| `maxLines` | `1 … 6` | — | Clamp with an ellipsis (`1` also breaks long words). |
| `numeric` | `boolean` | `false` | Tabular figures for aligned digits. |
| `align` | `'start' \| 'center' \| 'end'` | — | Text alignment. |
| `color` | `'neutral' \| 'neutral-faded' \| 'primary' \| 'critical' \| 'positive' \| 'warning'` | — | Body text, secondary text, or a hue. Unset inherits, so text on a solid fill keeps the on-colour. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

Every `color`. Without one, text inherits the surrounding colour.

```astro
<Text color="neutral">Neutral text.</Text>
<Text color="neutral-faded">Neutral faded text.</Text>
<Text color="primary">Primary text.</Text>
<Text color="critical">Critical text.</Text>
<Text color="positive">Positive text.</Text>
<Text color="warning">Warning text.</Text>
```

## Sizes

Every size:

```astro
<Text size="small">Small text.</Text>
<Text>Base text.</Text>
<Text size="large">Large text.</Text>
```

## Weight, clamping, numbers

```astro
<Text weight="regular">Regular</Text>
<Text weight="medium">Medium</Text>
<Text weight="semibold">Semibold</Text>
<Text weight="bold">Bold</Text>
<Text maxLines={2}>A long paragraph …</Text>
<Text numeric>1,024 · 2,048 · 4,096</Text>
<Text size={{ base: 'small', md: 'large' }}>Small on phones, large from md</Text>
```

## Alignment

```astro
<Text align="start">Start</Text>
<Text align="center">Centre</Text>
<Text align="end">End</Text>
```

## States

Static text — no interactive states.

## Examples

Rendered as a different element (`span` inline, `div` block):

```astro
<Text as="span">Inline span.</Text>
<Text as="div" size="small" color="neutral-faded">Block div, small, faded.</Text>
```

## Accessibility

Native semantics, no extra ARIA needed. `as` picks a plain, non-semantic tag (`p` / `span` / `div`) — for headings, lists, or other meaningful structure, use the tag or component that carries that meaning instead of `Text`.

## Tokens

| Token | Used for |
| --- | --- |
| `--foreground-neutral` | Default text color |
| `--foreground-neutral-faded` | `color="neutral-faded"` text |

## Do / Don’t

-   **Do** use `color="neutral-faded"` for secondary/supporting copy (timestamps, helper text).
-   **Do** pick `as` to match the surrounding flow (`span` inside a line, `div` / `p` as a block).
-   **Don’t** use `Text` for headings — it has no heading semantics or size scale for that.
-   **Don’t** hard-code font size or colour classes; use `size` and `color`.

## Content

-   Sentence case. No filler (“please note”, “simply”) — say the thing.
-   Keep line length readable; let `leading-relaxed` do the work rather than forcing breaks.

## Related

[

HeadingA semantic, fluid-sized heading — pick the tag with \`as\`, the visual size with \`size\`.

](https://apogee.avaui.dev/docs/heading)[

ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.

](https://apogee.avaui.dev/docs/prose)[

EyebrowA small label above a heading, for section tags and category kickers.

](https://apogee.avaui.dev/docs/eyebrow)