Text

Typography for body text with size and weight variants

Installation

pnpm add @wandercom/design-system-web

Usage

import { Text } from '@wandercom/design-system-web/ui/text';

export function Example() {
  return <Text variant="body-lg">Body text content</Text>;
}

Variants

<Text variant="body-lg" weight="medium">Medium weight body text</Text>
<Text variant="body-sm" weight="medium">Small body text</Text>

Weight variations

<Text variant="body-lg" weight="normal">Normal weight (450)</Text>
<Text variant="body-lg" weight="medium">Medium weight (550)</Text>

Color variations

<Text variant="body-lg" color="primary">Primary text (default)</Text>
<Text variant="body-lg" color="secondary">Secondary text</Text>
<Text variant="body-lg" color="tertiary">Tertiary text</Text>

Semantic elements

<Text as="h1" variant="body-lg">Page title</Text>
<Text as="p" variant="body">Paragraph text</Text>
<Text as="span" variant="body-sm">Inline text</Text>

Variants

Body large long

Loading example...
<Text variant="body-lg-long">Text Body Large Long</Text>

Body large

Loading example...
<Text variant="body-lg">Text Body Large</Text>

Body large medium

Loading example...
<Text variant="body-lg" weight="medium">
  Text Body Large / Medium
</Text>

Body long

Loading example...
<Text variant="body-long">Text Body Long</Text>

Body

Loading example...
<Text variant="body-lg">Text Body</Text>

Body medium

Loading example...
<Text variant="body-lg" weight="medium">
  Text Body / Medium
</Text>

Body small

Loading example...
<Text variant="body-sm">Text Body Small</Text>

Body small medium

Loading example...
<Text variant="body-sm" weight="medium">
  Text Body Small / Medium
</Text>

Responsive

Loading example...
<Text variant={{ base: 'body-sm', md: 'body', lg: 'body-lg' }}>Text Responsive</Text>

Props

variant

OptionallyResponsive<'body-lg-long' | 'body-lg' | 'body-long' | 'body' | 'body-sm'>
Text variant. Controls both the size and default weight. Defaults to 'body'.

weight

'normal' | 'medium'
Font weight override. Maps to custom weights (normal: 450, medium: 550). Overrides the default weight for the variant.

color

'primary' | 'secondary' | 'tertiary'
Text color variant using design system semantic colors. Defaults to 'primary'.

as

'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
HTML element to render. Defaults to 'p'.

asChild

boolean
When true, renders children and merges props onto the child element instead of rendering a paragraph.

className

string
Additional CSS classes to apply.
Text