Text

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

Last updated

Body copy at the base size.

Muted secondary copy.

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

Add

npx @ava-ui/apogee add text

No Apogee dependencies.

Usage

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

Neutral text.

Neutral faded text.

Primary text.

Critical text.

Positive text.

Warning text.

Show code
<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:

Small text.

Base text.

Large text.

Show code
<Text size="small">Small text.</Text>
<Text>Base text.</Text>
<Text size="large">Large text.</Text>

Weight, clamping, numbers

Regular

Medium

Semibold

Bold

A long paragraph that keeps going past the second line and therefore gets clamped with an ellipsis at the end of line two, however long it is.

1,024 · 2,048 · 4,096

Small on phones, large from md

Show code
<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

Start

Centre

End

Show code
<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):

Inline span.
Block div, small, faded.
Show code
<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`.
ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.
EyebrowA small label above a heading, for section tags and category kickers.