Text
Any text, in one of Veneer's roles. A size, weight or colour is never a prop.
Preview
tsx
import { Stack, Text } from '@kerf-js/veneer'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 @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Tone
Codeupdates as you change the controls
import { Text } from '@kerf-js/veneer'<Text>Deployed two minutes ago</Text>Usage
tsx
import { Text } from '@kerf-js/veneer'<Text>Deployed two minutes ago</Text>Tones
tone colours it. Pair it with words, not just colour.
tsx
import { Stack, Text } from '@kerf-js/veneer'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 '@kerf-js/veneer'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 '@kerf-js/veneer'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 '@kerf-js/veneer'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
rolehere is a look, not an ARIA role: it never reaches the HTMLroleattribute.- Every text colour meets contrast on Veneer's surfaces, except
faint, which is for what people can do without.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | unknown | — | What it contains. |
role | (string & {}) | "display" | "title" | "heading" | "label" | "body" | "ca… | — | 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>. |