Typography

Semantic text components for titles, paragraphs, and text formatting.

Import

import { Typography } from 'asterui'

const { Title, Paragraph, Text, Link } = Typography

Examples

Titles

Heading levels from h1 to h5.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

import { Typography } from 'asterui'

function App() {
  const { Title } = Typography
  
  return (
      <div>
        <Title level={1}>h1. Heading</Title>
        <Title level={2}>h2. Heading</Title>
        <Title level={3}>h3. Heading</Title>
        <Title level={4}>h4. Heading</Title>
        <Title level={5}>h5. Heading</Title>
      </div>
    )
}

export default App

Paragraph

Block-level text content.

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Good typography creates a visual hierarchy, helps users navigate content, and improves the overall user experience. It's an essential element of web design that directly impacts readability and engagement.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div>
        <Paragraph>
          Typography is the art and technique of arranging type to make written language legible,
          readable, and appealing when displayed. The arrangement of type involves selecting
          typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
        </Paragraph>
        <Paragraph>
          Good typography creates a visual hierarchy, helps users navigate content, and improves the
          overall user experience. It's an essential element of web design that directly impacts
          readability and engagement.
        </Paragraph>
      </div>
    )
}

export default App

Text Types

Different text types for various contexts.

Default TextSecondary TextSuccess TextWarning TextDanger TextDisabled Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text>Default Text</Text>
        <Text type="secondary">Secondary Text</Text>
        <Text type="success">Success Text</Text>
        <Text type="warning">Warning Text</Text>
        <Text type="danger">Danger Text</Text>
        <Text disabled>Disabled Text</Text>
      </Space>
    )
}

export default App

Text Styles

Various text formatting options.

Bold TextItalic TextUnderlined Text~~Strikethrough Text~~Code TextMarked TextKeyboard Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text strong>Bold Text</Text>
        <Text italic>Italic Text</Text>
        <Text underline>Underlined Text</Text>
        <Text delete>Strikethrough Text</Text>
        <Text code>Code Text</Text>
        <Text mark>Marked Text</Text>
        <Text keyboard>Keyboard Text</Text>
      </Space>
    )
}

export default App

Links

Styled anchor elements.

Basic Link Secondary Link Success Link Warning Link Danger Link

import { Typography, Space } from 'asterui'

function App() {
  const { Link } = Typography
  
  return (
      <Space direction="vertical">
        <Link href="#">Basic Link</Link>
        <Link href="#" type="secondary">
          Secondary Link
        </Link>
        <Link href="#" type="success">
          Success Link
        </Link>
        <Link href="#" type="warning">
          Warning Link
        </Link>
        <Link href="#" type="danger">
          Danger Link
        </Link>
      </Space>
    )
}

export default App

Copyable

Copy text to clipboard with a click.

This is copyable text. Click the icon to copy.

Copy different text than displayed.

import { Typography, Space } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph copyable>This is copyable text. Click the icon to copy.</Paragraph>
        <Paragraph copyable={{ text: 'Custom copied text!' }}>
          Copy different text than displayed.
        </Paragraph>
      </Space>
    )
}

export default App

Ellipsis

Truncate long text with ellipsis.

This is a very long paragraph that will be truncated with an ellipsis when it exceeds the available width. This helps maintain clean layouts when dealing with variable-length content.

This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div className="max-w-md">
        <Paragraph ellipsis>
          This is a very long paragraph that will be truncated with an ellipsis when it exceeds the
          available width. This helps maintain clean layouts when dealing with variable-length
          content.
        </Paragraph>
        <Paragraph ellipsis={{ rows: 2 }}>
          This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </Paragraph>
      </div>
    )
}

export default App

Editable

Inline editable text.

This text can be edited. Click to modify.

Editable Heading

import { Typography, Space } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph editable>This text can be edited. Click to modify.</Paragraph>
        <Title level={4} editable>
          Editable Heading
        </Title>
      </Space>
    )
}

export default App

API

Property	Description	Type	Default
`children`	Content	`React.ReactNode`	-
`className`	Additional CSS classes	`string`	-
`level`	Heading level (h1-h5) - Title only	`1 \| 2 \| 3 \| 4 \| 5`	`1`
`copyable`	Enable copy to clipboard - Title and Paragraph	`boolean \| { text?: string }`	`false`
`ellipsis`	Truncate with ellipsis - Title and Paragraph	`boolean \| { rows?: number }`	`false`
`editable`	Enable inline editing - Title only	`boolean`	`false`
`type`	Text type for styling - Text and Link	`'secondary' \| 'success' \| 'warning' \| 'danger'`	-
`disabled`	Disabled style - Text only	`boolean`	`false`
`strong`	Bold text - Text only	`boolean`	`false`
`italic`	Italic text - Text only	`boolean`	`false`
`underline`	Underlined text - Text only	`boolean`	`false`
`delete`	Strikethrough text - Text only	`boolean`	`false`
`code`	Code style - Text only	`boolean`	`false`
`mark`	Highlighted text - Text only	`boolean`	`false`
`keyboard`	Keyboard style - Text only	`boolean`	`false`
`size`	Text size - Text, Paragraph, and Link	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'`	-
`align`	Text alignment - Paragraph only	`'left' \| 'center' \| 'right'`	-
`href`	Link URL - Link only	`string`	`'#'`
`external`	Open in new tab with external icon - Link only	`boolean`	`false`
`data-testid`	Test ID for testing	`string`	-

Accessibility

Uses semantic HTML elements (h1-h5, p, span, a)
Proper heading hierarchy maintained
Links have accessible labels
Copy and edit actions are keyboard accessible