Templates

PageHeader

O cabeçalho dentro do corpo da página: título, descrição, selo e ações, com espaço embaixo para abas ou filtros. Em largura estreita, as ações descem para baixo do texto e a última ocupa a linha inteira.

Só o título

Configurações

Lista com ações

badge com o total e ações à direita, com o botão principal por último.

Envelopes

24 envelopes

Tudo o que você enviou ou precisa assinar, com status e prazo de cada documento.

Detalhe com abas

eyebrow mostra de onde a página vem; children recebe as abas.

Envelopes · DOC-2026-001184

Contrato de prestação de serviços

Em assinatura

Enviado por Marina Couto em 12/10/2026. Prazo para assinar: 24/10/2026.

Celular

Numa largura de 390px, o botão principal ocupa a linha toda. hideTextOnMobile esconde o texto para quando o AppHeader já mostra o título.

Envelopes

Tudo o que você enviou ou precisa assinar.

Uso

<PageHeader
  title="Envelopes"
  description="Tudo o que você enviou ou precisa assinar."
  badge={<Chip size="sm" tone="primary">24 envelopes</Chip>}
  actions={<Button startIcon={<Plus />}>Novo envelope</Button>}
>
  <TabsNavigation aria-label="Caixas" items={tabs} value={tab} onValueChange={setTab} />
</PageHeader>

Props

Prop	Tipo	Padrão	Descrição
title	ReactNode	—	Título da página, em h1.
eyebrow · description · badge	ReactNode	—	Texto acima, descrição abaixo e selo ao lado do título.
actions	ReactNode	—	Ações à direita; a última é a principal.
children	ReactNode	—	Abas, filtros ou o que vier abaixo.
hideTextOnMobile	boolean	false	Esconde o texto (só para leitor de tela) em largura estreita.
fluidPrimaryOnMobile	boolean	true	Em largura estreita, a última ação ocupa a linha.