Typography

Componentes de texto semântico para títulos, parágrafos e formatação de texto.

Importação

import { Typography } from 'asterui'

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

Exemplos

Títulos

Níveis de cabeçalho de h1 a 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

Parágrafo

Conteúdo de texto em nível de bloco.

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

Tipos de Texto

Diferentes tipos de texto para vários contextos.

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

Estilos de Texto

Várias opções de formatação de texto.

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

Elementos âncora estilizados.

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

Copiável

Copie texto para a área de transferência com um clique.

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

Elipse

Trunca texto longo com elipse.

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

Editável

Texto editável inline.

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

Propriedade	Descrição	Tipo	Padrão
`children`	Conteúdo	`React.ReactNode`	-
`className`	Classes CSS adicionais	`string`	-
`level`	Nível de cabeçalho (h1-h5) - apenas Title	`1 \| 2 \| 3 \| 4 \| 5`	`1`
`copyable`	Habilitar copiar para área de transferência - Title e Paragraph	`boolean \| { text?: string }`	`false`
`ellipsis`	Truncar com elipse - Title e Paragraph	`boolean \| { rows?: number }`	`false`
`editable`	Habilitar edição inline - apenas Title	`boolean`	`false`
`type`	Tipo de texto para estilização - Text e Link	`'secondary' \| 'success' \| 'warning' \| 'danger'`	-
`disabled`	Estilo desabilitado - apenas Text	`boolean`	`false`
`strong`	Texto em negrito - apenas Text	`boolean`	`false`
`italic`	Texto em itálico - apenas Text	`boolean`	`false`
`underline`	Texto sublinhado - apenas Text	`boolean`	`false`
`delete`	Texto riscado - apenas Text	`boolean`	`false`
`code`	Estilo de código - apenas Text	`boolean`	`false`
`mark`	Texto destacado - apenas Text	`boolean`	`false`
`keyboard`	Estilo de teclado - apenas Text	`boolean`	`false`
`size`	Tamanho do texto - Text, Paragraph e Link	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'`	-
`align`	Alinhamento do texto - apenas Paragraph	`'left' \| 'center' \| 'right'`	-
`href`	URL do link - apenas Link	`string`	`'#'`
`external`	Abrir em nova aba com ícone externo - apenas Link	`boolean`	`false`
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Usa elementos HTML semânticos (h1-h5, p, span, a)
Hierarquia de cabeçalho adequada mantida
Links têm labels acessíveis
Ações de copiar e editar são acessíveis por teclado