# PageHeader

O topo que toda rota reescreve um pouco diferente: trilha, título, descrição
e as ações da tela, na mesma hierarquia em todas as páginas.

O título sai num `<h1>` por padrão. Cabeçalho de página é o topo dela, e
começar a página num `h2` deixa um buraco que o leitor de tela sente. A
trilha entra pelo slot `breadcrumb`, com o `Breadcrumb` da casa; as ações
entram por `actions` e ficam à direita, quebrando de linha no estreito antes
de espremer o título.

## Quando o cabeçalho não é o topo

`titleAs` baixa o título para `h2` ou `h3` sem mexer no desenho. Nível
semântico e tamanho visual são coisas diferentes, e o título continua o mesmo
`text-2xl` em qualquer nível.

```tsx
<PageHeader titleAs="h2" title="Notas fiscais" />
```

Use quando o `PageHeader` não é o começo da página: a aplicação já tem o `h1`
no shell, a peça está dentro de uma região, ou é um exemplo dentro de outra
página (como os desta aqui, que saem em `h2` justamente por isso). Dois `h1`
na mesma página não dão erro em lugar nenhum: quem navega por título de nível
1 é que cai no lugar errado.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `PageHeader` - `title`, `description`, `badge` e `actions` como props. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { PageHeader } from '@rivocode/ui'
```

## Exemplos

### Padrão

```tsx
import { Breadcrumb, Button, PageHeader } from '@rivocode/ui'
import { Download, Plus } from 'lucide-react'

export function Default() {
  return (
    <PageHeader
      className="w-full"
      title="Notas fiscais"
      titleAs="h2"
      description="Tudo que foi emitido no mês, pago ou não."
      breadcrumb={
        <Breadcrumb
          items={[{ label: 'RivoCode', href: '#' }, { label: 'Notas fiscais' }]}
        />
      }
      actions={
        <>
          <Button variant="secondary">
            <Download size={16} aria-hidden="true" />
            Exportar
          </Button>
          <Button>
            <Plus size={16} aria-hidden="true" />
            Nova nota
          </Button>
        </>
      }
    />
  )
}
```

### Só o título

```tsx
import { Breadcrumb, Button, PageHeader } from '@rivocode/ui'
import { Download, Plus } from 'lucide-react'

export function TitleOnly() {
  return <PageHeader className="w-full" title="Ajustes" titleAs="h2" />
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `title` | `ReactNode` | sim | 0.4.0 | O nome da tela. |
| `actions` | `ReactNode` |  | 0.4.0 | O que da para fazer daqui: botao de criar, exportar, filtrar. |
| `breadcrumb` | `ReactNode` |  | 0.4.0 | A trilha ate aqui: o `Breadcrumb` da casa. |
| `classNames` | `Partial<Record<"actions" \| "description" \| "heading" \| "row" \| "title", string>>` |  | - | Classe por parte: `row`, `heading`, `title`, `description`, `actions`. |
| `description` | `ReactNode` |  | 0.4.0 | Uma frase sobre o que a tela mostra. |
| `titleAs` | `"h1" \| "h2" \| "h3"` |  | - | Em que nivel o titulo sai. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Avatar](/componentes/avatar.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)