> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/typography.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Typography

Organize headings, body text and links.

## Basic usage


### Project notes

Organize headings, body text and links with a consistent reading rhythm.

Updated today · [Read the API](#typography-api)

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/typography/basic.tsx"
import { Link, Paragraph, Text, Title, Typography } from '@ifhover/leaf-ui';

export function TypographyBasic() {
  return (
    <Typography>
      <Title level={3}>{'Project notes'}</Title>
      <Paragraph>
        {'Organize headings, body text and links with a consistent reading rhythm.'}
      </Paragraph>
      <Text tone="muted">{'Updated today'}</Text>
      {' · '}
      <Link href="#typography-api">{'Read the API'}</Link>
    </Typography>
  );
}
```

Expand code

## Copy and edit


Leaf workspace

A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.Expand

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/typography/basic.tsx"
import { Paragraph, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TypographyActions() {
  const [text, setText] = useState('Leaf workspace');
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Text copyable editable={{ onChange: setText }}>
        {text}
      </Text>
      <Paragraph ellipsis={{ rows: 2, expandable: true }} style={{ maxWidth: 320 }}>
        {'A workspace helps the team organize projects and share useful information. Keep the most important content visible, then expand the paragraph when more detail is needed.'}
      </Paragraph>
    </div>
  );
}
```

Expand code

## Typography API

| Property  | Type      | Default | Description                    |
| --------- | --------- | ------- | ------------------------------ |
| `compact` | `boolean` | —       | Use tighter paragraph spacing. |

## Text API

| Property    | Type                                                                                                | Default     | Description                                                   |
| ----------- | --------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
| `tone`      | `'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'danger'`                           | `'default'` | Semantic text tone.                                           |
| `strong`    | `boolean`                                                                                           | —           | Use bold text.                                                |
| `italic`    | `boolean`                                                                                           | —           | Use italic text.                                              |
| `underline` | `boolean`                                                                                           | —           | Show an underline.                                            |
| `code`      | `boolean`                                                                                           | —           | Display as inline code.                                       |
| `mark`      | `boolean`                                                                                           | —           | Highlight text.                                               |
| `ellipsis`  | `boolean \| { rows?: number; expandable?: boolean }`                                                | —           | Truncate one or more lines, optionally with an expand action. |
| `copyable`  | `boolean \| { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }` | —           | Provide a copy action with optional content and callbacks.    |
| `editable`  | `{ onChange: (text: string) => void; text?: string }`                                               | —           | Provide editing; update the text after onChange.              |

## Paragraph API

| Property    | Type                                                                                                | Default     | Description                                                   |
| ----------- | --------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
| `tone`      | `'default' \| 'muted' \| 'primary' \| 'success' \| 'warning' \| 'danger'`                           | `'default'` | Semantic text tone.                                           |
| `strong`    | `boolean`                                                                                           | —           | Use bold text.                                                |
| `italic`    | `boolean`                                                                                           | —           | Use italic text.                                              |
| `underline` | `boolean`                                                                                           | —           | Show an underline.                                            |
| `code`      | `boolean`                                                                                           | —           | Display as inline code.                                       |
| `mark`      | `boolean`                                                                                           | —           | Highlight text.                                               |
| `ellipsis`  | `boolean \| { rows?: number; expandable?: boolean }`                                                | —           | Truncate one or more lines, optionally with an expand action. |
| `copyable`  | `boolean \| { text?: string; onCopy?: (text: string) => void; onError?: (error: unknown) => void }` | —           | Provide a copy action with optional content and callbacks.    |
| `editable`  | `{ onChange: (text: string) => void; text?: string }`                                               | —           | Provide editing; update the text after onChange.              |

## Title API

| Property | Type                         | Default | Description                     |
| -------- | ---------------------------- | ------- | ------------------------------- |
| `level`  | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2`     | Heading level, rendering h1–h6. |

## Link API

| Property    | Type        | Default | Description                                  |
| ----------- | ----------- | ------- | -------------------------------------------- |
| `disabled`  | `boolean`   | —       | Disable interaction.                         |
| `underline` | `boolean`   | `true`  | Show an underline.                           |
| `external`  | `boolean`   | —       | Open in a new tab with a safe rel attribute. |
| `icon`      | `ReactNode` | —       | Icon content.                                |

## Types and interaction

Import the props and data types when creating reusable configuration.

```ts
import type { TypographyProps, TextProps, ParagraphProps, TitleProps, LinkProps } from '@ifhover/leaf-ui';
```

Provide accessible labels for icon-only actions. Interactive controls support keyboard navigation and respect ConfigProvider themes and reduced motion.