Typography

Fundamentos

Texto com a escala tipográfica do design system.

Quando usar: todo título e texto corrido, para manter fontes e tamanhos consistentes.

Quando não usar: rótulos de campos (use o label do AppInput/AppTextarea) ou ações (use AppButton).

Importar

import { Typography } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/Typography.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/Typography.css';

Exemplos

Default

const Default = () => <Typography variant="body">Cadastre sua nota fiscal e participe</Typography>;

Heading

const Heading = () => <Typography variant="h2">Cadastre sua nota fiscal e participe</Typography>;

Medium Weight

const MediumWeight = () => <Typography variant="body" weight="medium">Cadastre sua nota fiscal e participe</Typography>;

As Different Element

const AsDifferentElement = () => <Typography variant="h2" as="h1">Título da página</Typography>;

All Variants

const AllVariants = () => (
  // `caption` e `small` renderizam <small> (inline): a coluna flex mantem uma variante por linha.
  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
    {variants.map((variant) => (
      <Typography key={variant} variant={variant}>
        {variant}: Participe da promoção
      </Typography>
    ))}
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
`as`	`ElementType`	`—`	Elemento HTML renderizado. Padrão: definido pela variante (h1–h6, `p`, `small`). Use para manter a semântica sem mudar o visual.
`children`	`ReactNode`	`—`	Conteúdo do texto.
`className`	`string`	`—`	Classe CSS extra.
`variant`	`"small" \| "body" \| "caption" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body-large" \| "footnote"`	`body`	Estilo tipográfico. Padrão: `body`.
`weight`	`"regular" \| "medium"`	`—`	Só tem efeito nas variantes em Poppins; os títulos h1–h5 (VAG Rundschrift D) têm peso único. Padrão: `regular`.