# Text

Text sets the size, weight and colour of body copy, labels and captions.

Text renders a run of copy at a step of the type scale: a paragraph, a label, a caption or a hint. A title for a page or a section is a [Heading](/docs/heading). Text that takes someone somewhere is a [Link](/docs/link).


## Usage

```tsx
import { Flex, Switch, Text } from '@kushagradhawan/kookie-ui';

export function NotificationSetting() {
  return (
    <Flex justify="between" align="center" gap="4">
      <Flex direction="column" gap="1">
        <Text as="label" htmlFor="digest" size="2" weight="medium">
          Weekly digest
        </Text>
        <Text as="p" size="2" emphasis="medium">
          A summary of activity in your projects, sent every Monday.
        </Text>
      </Flex>
      <Switch id="digest" />
    </Flex>
  );
}
```

## Best practices

**Rank text with emphasis, not with gray.** Use `emphasis="medium"` for secondary copy and `emphasis="quiet"` for hints and metadata. The levels follow the theme, so they stay readable in light and dark mode.

**Pick the element with `as`.** Text renders a `span` by default. Set `as="p"` for a paragraph, `as="label"` for a form label and `as="div"` for a block. A screen reader reads the element, not the size.

**Keep body copy at sizes 2 and 3.** Size 2 (14px) suits interface text and size 3 (16px) suits reading. Larger sizes are for short lines such as a lead sentence or a number on a dashboard.

**Use colour for meaning.** Set `color="red"` on an error message or `color="green"` on a success line. Colour on ordinary copy makes it harder to tell which line matters.

**Don't use Text for a title.** A large Text still reads as a `span` or `p`. Use a [Heading](/docs/heading), so the page has an outline people can move through.

## Emphasis

`emphasis` sets how strongly text reads. With no `color` set, the levels step down the neutral ink. With a `color` set, they fade that colour.

| Emphasis | Use it for |
| --- | --- |
| `loud` | Primary copy that must stand out |
| `medium` | Descriptions and secondary copy |
| `quiet` | Hints, timestamps and metadata |

With no `color` and no `emphasis`, Text inherits its colour, so it matches the Button, Card or Notice it sits in.

## Size

`size` picks a step from 1 to 9: 12, 14, 16, 18, 20, 24, 32, 44 and 64 pixels at the default scale. Each step sets its own line height and letter spacing. With no `size`, Text inherits the font size around it. `size` accepts a responsive object, such as `{ initial: '2', md: '3' }`.

## Examples

### Error message under a field

Set `color` so the message reads as an error, and keep it at the field's size.

```tsx
<Text as="p" size="1" color="red">
  Enter an email address with an @ sign.
</Text>
```

### One line in a narrow space

`truncate` keeps the text on one line and ends it with an ellipsis. Give the parent a width so the text has a limit to truncate against.

```tsx
<Box maxWidth="240px">
  <Text as="div" size="2" truncate>
    quarterly-report-final-version-approved.pdf
  </Text>
</Box>
```

### Text aligned to the edge of a box

`trim` removes the space above the first line or below the last line, so the text lines up with an icon or the edge of a card. Use `start`, `end` or `both`.

```tsx
<Text as="p" size="3" trim="both">
  Your plan renews on 1 March.
</Text>
```

### Styling another element

`asChild` puts Text's styles on its child, such as a `time` element.

```tsx
<Text asChild size="1" emphasis="quiet">
  <time dateTime="2026-03-01">1 March</time>
</Text>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `'span' \| 'div' \| 'label' \| 'p'` | `'span'` | The element to render |
| `size` | `'1'` to `'9'`, responsive | | The type step. Inherits when unset |
| `weight` | `'regular' \| 'medium' \| 'semibold'`, responsive | | The font weight. Inherits when unset |
| `font` | `'sans' \| 'mono' \| 'serif'` | | The font family, in place of the theme font |
| `color` | `AccentColor` | | The colour. Inherits when unset |
| `emphasis` | `'loud' \| 'medium' \| 'quiet'` | | How strongly the text reads |
| `align` | `'left' \| 'center' \| 'right'`, responsive | | The text alignment |
| `trim` | `'normal' \| 'start' \| 'end' \| 'both'`, responsive | | Removes the space above or below the text |
| `truncate` | `boolean` | | Keeps one line and ends it with an ellipsis |
| `wrap` | `'wrap' \| 'nowrap' \| 'pretty' \| 'balance'`, responsive | | How lines break |
| `asChild` | `boolean` | `false` | Renders the child element with Text's styles |

Text also accepts every attribute of the element set by `as`.

## Accessibility

- **Element:** A screen reader reads the element, not the look. Use `as="p"` for paragraphs, so people can move between them.
- **Labels:** `as="label"` with `htmlFor` names a form control and lets people click the label to focus it.
- **Truncation:** Truncated text is still read in full by a screen reader. A pointer user can't see the rest, so add a [Tooltip](/docs/tooltip) or a `title` when the hidden part matters.
- **Colour:** Don't rely on colour alone to carry a meaning. Put the meaning in the words too, such as "Error:" or "Saved".