Typography

Componentes de texto semántico para títulos, párrafos y formato de texto.

Importación

import { Typography } from 'asterui'

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

Ejemplos

Títulos

Niveles de encabezado 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

Párrafo

Contenido de texto a nivel de bloque.

</>

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 varios 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

Varias opciones de formato de texto.

</>

Bold TextItalic TextUnderlined TextStrikethrough TextCode 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

Enlaces

Elementos de ancla estilizados.

</>

Basic LinkSecondary LinkSuccess LinkWarning LinkDanger 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

Copiable

Copia texto al portapapeles con un clic.

</>

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

Elipsis

Trunca texto largo con elipsis.

</>

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

Texto editable en línea.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
children	Contenido	React.ReactNode	-
className	Clases CSS adicionales	string	-
level	Nivel de encabezado (h1-h5) - solo Title	1 | 2 | 3 | 4 | 5	1
copyable	Habilitar copiar al portapapeles - Title y Paragraph	boolean | { text?: string }	false
ellipsis	Truncar con elipsis - Title y Paragraph	boolean | { rows?: number }	false
editable	Habilitar edición en línea - solo Title	boolean	false
type	Tipo de texto para estilizado - Text y Link	'secondary' | 'success' | 'warning' | 'danger'	-
disabled	Estilo deshabilitado - solo Text	boolean	false
strong	Texto en negrita - solo Text	boolean	false
italic	Texto en cursiva - solo Text	boolean	false
underline	Texto subrayado - solo Text	boolean	false
delete	Texto tachado - solo Text	boolean	false
code	Estilo de código - solo Text	boolean	false
mark	Texto resaltado - solo Text	boolean	false
keyboard	Estilo de teclado - solo Text	boolean	false
size	Tamaño del texto - Text, Paragraph y Link	'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl'	-
align	Alineación del texto - solo Paragraph	'left' | 'center' | 'right'	-
href	URL del enlace - solo Link	string	'#'
external	Abrir en nueva pestaña con icono externo - solo Link	boolean	false
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa elementos HTML semánticos (h1-h5, p, span, a)
• Se mantiene la jerarquía adecuada de encabezados
• Los enlaces tienen etiquetas accesibles
• Las acciones de copiar y editar son accesibles por teclado