Text

Any text, in one of warp's roles. A size, weight or colour is never a prop.

SourcePackage @weft-js/warpPlayground

Preview

tsx

import { Code, Heading, Stack, Text } from '@weft-js/warp'export function Roles() {  return (    <Stack gap="related">      <Text role="display">Display</Text>      <Text role="title">Title</Text>      <Text role="heading">Heading</Text>      <Text role="body">Body</Text>      <Text role="label">Label</Text>      <Text role="caption">Caption</Text>      <Text role="eyebrow">Eyebrow</Text>      <Text role="code">Code</Text>    </Stack>  )}

Installation

npm install @weft-js/warp

Usage

tsx

import { Text } from '@weft-js/warp'<Text>Deployed two minutes ago</Text>

Tones

tone colours it. Pair it with words, not just colour.

tsx

import { Stack, Text } from '@weft-js/warp'export function Tones() {  return (    <Stack gap="tight">      <Text tone="accent">Deployed two minutes ago.</Text>      <Text tone="positive">Deployed two minutes ago.</Text>      <Text tone="caution">Deployed two minutes ago.</Text>      <Text tone="critical">Deployed two minutes ago.</Text>    </Stack>  )}

Quieter

subtle and faint.

tsx

import { Stack, Text } from '@weft-js/warp'export function Ink() {  return (    <Stack gap="tight">      <Text>Deployed two minutes ago.</Text>      <Text subtle>Deployed two minutes ago.</Text>      <Text faint>Deployed two minutes ago.</Text>    </Stack>  )}

Inside a sentence

inline makes it a span.

tsx

import { Text } from '@weft-js/warp'export function Inline() {  return (    <Text>Uptime is <Text inline tone="positive">99.98%</Text> this month, <Text inline subtle>up from 99.91%</Text>.</Text>  )}

Roles working together

Use role to pick eyebrow, heading or caption text, and tone to colour a line.

tsx

import { Stack, Text } from '@weft-js/warp'export function DeployNote() {  return (    <Stack gap="tight">      <Text role="eyebrow" subtle>Deploy d-4819</Text>      <Text role="heading">Retry timed out upstream calls</Text>      <Text subtle>Sam Okafor pushed this to main. It stopped at the health check after four minutes.</Text>      <Text role="caption" tone="critical">Failed, 31 October at 15:27</Text>    </Stack>  )}

When to use

Use it for

Every piece of text that isn't a heading

Reach for something else

Heading, when it titles a section

Accessibility

role here is a look, not an ARIA role: it never reaches the HTML role attribute.
Every text colour meets contrast on warp's surfaces, except faint, which is for what people can do without.

API Reference

Prop	Type	Default	Description
`children`	`unknown`	—	What it contains.
`role`	`"display" \| "title" \| "heading" \| "label" \| "body" \| "caption" \| "eyebro…`	—	The look: `display`, `title`, `heading`, `body`, `label`, `caption`, `eyebrow` or `code`.
`tone`	`"neutral" \| "accent" \| "positive" \| "caution" \| "critical" \| "info"`	—	Colours it.
`subtle`	`boolean`	`false`	Quieter.
`faint`	`boolean`	`false`	Quieter still.
`inline`	`boolean`	`false`	A `<span>`, not a `<p>`.

RelatedHeading Link Code