> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Text

Geist for body copy, labels and anything read as prose — reach for `Heading` when the text is a title and `Link` when it navigates. Weight carries emphasis and colour carries de-emphasis, so build hierarchy from those rather than by changing size.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Text) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/typography-text--overview)

```tsx
import { Text } from '@wallarm-org/design-system/Text';

export const Basic = () => (
  <Text>Default body text</Text>
);
```

## Usage

```tsx
import { Text } from '@wallarm-org/design-system/Text';
```

## Examples

### Sizes

The ramp, for density rather than hierarchy — step down in a dense table, not to signal that
something matters less. Note that `md` sets no size of its own and inherits from its
container, so prefer an explicit step until that is fixed.

```tsx
import { VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

export const Sizes = () => (
  <VStack gap={24} align='start'>
    {SIZES.map(({ size, metrics }) => (
      <VStack key={size} gap={4} align='start'>
        <Text size='xs' color='secondary'>
          size=&apos;{size}&apos; · {metrics}
        </Text>
        <Text size={size}>
          The quick brown fox jumps over the lazy dog
        </Text>
      </VStack>
    ))}
  </VStack>
);
```

### Weights

All four weights at one size. Weight is emphasis within a level, never a way to create one.

```tsx
import { VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

export const Weights = () => (
  <VStack align='start'>
    <Text size='lg' weight='light'>
      Light Weight Body Text
    </Text>
    <Text size='lg' weight='regular'>
      Regular Weight Body Text
    </Text>
    <Text size='lg' weight='medium'>
      Medium Weight Body Text
    </Text>
    <Text size='lg' weight='bold'>
      Bold Weight Body Text
    </Text>
  </VStack>
);
```

### Colors

The de-emphasis ladder. Colour is how text recedes; a smaller size only makes it harder to
read.

```tsx
import { VStack } from '@wallarm-org/design-system/Stack';
import { Text } from '@wallarm-org/design-system/Text';

export const Colors = () => (
  <VStack align='start'>
    <Text color='primary'>
      Primary color text
    </Text>
    <Text color='primary-alt'>
      Primary alt color text
    </Text>
    <Text color='secondary'>
      Secondary color text
    </Text>
    <Text color='secondary-alt'>
      Secondary alt color text
    </Text>
    <Text color='tertiary-alt'>
      Tertiary alt color text
    </Text>
  </VStack>
);
```

### As child

`asChild` puts the typography on your own element, for when the tag matters to the document
but the styling should still come from here.

```tsx
import { Text } from '@wallarm-org/design-system/Text';

export const AsChild = () => (
  <Text size='lg' weight='medium' asChild>
    <span>Custom Span Element with AsChild</span>
  </Text>
);
```

## Props

| Prop           | Type                                                                                                                                               | Default   | Description |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| title          | `string \| undefined`                                                                                                                              |           |             |
| defaultChecked | `boolean \| undefined`                                                                                                                             |           |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                                                                                               |           |             |
| autoFocus      | `boolean \| undefined`                                                                                                                             |           |             |
| id             | `string \| undefined`                                                                                                                              |           |             |
| tabIndex       | `number \| undefined`                                                                                                                              |           |             |
| rel            | `string \| undefined`                                                                                                                              |           |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                                                                                      |           |             |
| color          | `{ primary: string; 'primary-alt': string; secondary: string; 'secondary-alt': string; 'tertiary-alt': string; danger: string; inherit: string; }` | `inherit` |             |
| size           | `{ xs: string; sm: string; md: string; lg: string; xl: string; }`                                                                                  | `lg`      |             |
| weight         | `{ light: string; regular: string; medium: string; bold: string; }`                                                                                | `regular` |             |
| align          | `{ left: string; center: string; right: string; }`                                                                                                 |           |             |
| inline         | `{ true: string; }`                                                                                                                                |           |             |
| grow           | `{ true: string; }`                                                                                                                                | `false`   |             |
| truncate       | `{ true: string; false: string; }`                                                                                                                 | `false`   |             |
| decoration     | `{ dashed: string; }`                                                                                                                              |           |             |
| lineHeight     | `{ none: string; tight: string; snug: string; normal: string; relaxed: string; }`                                                                  |           |             |
| textTransform  | `{ uppercase: string; lowercase: string; capitalize: string; none: string; }`                                                                      |           |             |
| asChild        | `boolean \| undefined`                                                                                                                             | `false`   |             |
| lineClamp      | `number \| undefined`                                                                                                                              |           |             |
| data-testid    | `string \| undefined`                                                                                                                              |           |             |