orn-ui
← Todos los componentes
Atom

Tipografía

Cuatro estilos de texto, un archivo, una instalación. Title, Subtitle, Body y Caption salen todos del mismo Text.tsx y se instalan juntos — al instalar uno obtienes los cuatro.

Requiere <UIProvider> — Primeros pasos →

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add title

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Title, Subtitle, Body, Caption } from 'orn-ui/title';

La instalación copia el archivo completo, pero solo importas y renderizas lo que realmente usas — no necesitas los cuatro.

Depende de:core (theme + icons)

Uso

  • Title — Títulos de página y de sección — el estilo más grande y con más peso. Uno o dos por pantalla, no más.
  • Subtitle — Subtítulo, justo debajo de un Title, o por sí solo como encabezado de sección más ligero.
  • Body — El estilo de párrafo por defecto — la mayor parte del texto de una pantalla debería ser Body.
  • Caption — Texto pequeño: notas secundarias, metadatos, marcas de tiempo o texto de ayuda debajo de un campo.
Clip del demo todavía sin grabar — ver MEDIA.md

Ejemplo — usados juntos

<Title>Invoice #1042</Title>
<Subtitle>Due in 5 days</Subtitle>
<Body>Body text, the default paragraph style for most content.</Body>
<Caption>Caption, used for secondary hints and metadata.</Caption>

Variantes

Title

<Title>Invoice #1042</Title>

Subtitle

<Subtitle>Due in 5 days</Subtitle>

Body

<Body>Body text, the default paragraph style for most content.</Body>

Caption

<Caption>Caption, used for secondary hints and metadata.</Caption>

align="center"

<Body align="center">Centered text</Body>

custom color

<Body color="#00cae1">Text with an explicit color override</Body>

Props

Las mismas props para Title, Subtitle, Body y Caption — los cuatro comparten TypographyProps.

NombreTipoPor defectoDescripción
style?StyleProp<TextStyle>——
color?string——
align?'left' | 'center' | 'right'——
AnteriorSpinnerSiguienteTransition