PageHeader

PageHeader estabelece qual é a página e o que alguém pode fazer na sua borda. Coloque ações de página em actions; mantenha controles que mudam o corpo, como filtros ou tabs, em children.

Exemplos

Contexto antes do título

Um eyebrow nomeia o escopo mais amplo; o título nomeia esta página. Omita o eyebrow quando o título já for específico, pois contexto duplicado enfraquece o alvo de leitura em vez de esclarecer.

Ações e uma linha secundária

actions guarda uma ou duas operações que afetam a página inteira. Uma linha secundária fica sob o título, onde tabs ou filtros podem mudar o corpo sem competir com ele.

Quando usar

Use PageHeader no início de uma página ou visão de detalhe duradoura cuja identidade, contexto e próxima ação precisam ser lidos juntos.

Prefira outro componente quando:

O título pertence a um card ou seção — use o título de Card ou um heading nativo.
Os controles são um grupo compacto de pares dentro do conteúdo — use Inline.
A página precisa de trilhos de navegação e um modelo de scroll — use Shell em volta do conteúdo.

Acessibilidade

PageHeader renderiza um <header> nativo e seu title como <h1> por padrão. Forneça o único título de página que representa o documento atual; para o cabeçalho de uma seção, escolha titleAs="h2" ou titleAs="h3" e mantenha o <h1> padrão para o título da página.
eyebrow e description são texto comum, não rótulos conectados com ARIA. Não dependa deles como o único nome acessível de uma ação.
actions e children mantêm a ordem no DOM depois do título. Use Buttons, links, Tabs ou campos nativos ali, para que o comportamento de teclado e foco visível continuem intactos.
Um header não move o foco. Quando a navegação troca a página, a aplicação decide se o foco vai para o novo <h1> ou para o primeiro controle da tarefa.

API e código

Nome	Tipo	Obrigatória	Descrição
`eyebrow`	`ReactNode`	—	Optional label displayed above the title.
`title`	`ReactNode`	Obrigatória	Required page heading, rendered in an `<h1>`.
`titleAs`	`'h1' \| 'h2' \| 'h3'`	—	Semantic element for the title. Use `"h2"` or `"h3"` when the header names a section; keep `"h1"` for the page title.
`description`	`ReactNode`	—	Optional text that explains the page's purpose.
`actions`	`ReactNode`	—	Optional controls aligned alongside the heading.
`children`	`ReactNode`	—	Optional secondary row, such as tabs or filters, rendered below the header row.

A linha do cabeçalho mantém ações da página ao lado da identidade; a linha secundária vem depois:

html

<header class="lyra-pageheader">
  <div class="lyra-pageheader__row">
    <div class="lyra-pageheader__text">
      <span class="lyra-pageheader__eyebrow">Projeto</span>
      <h1 class="lyra-pageheader__title">Site Acme</h1>
      <p class="lyra-pageheader__desc">Gerencie as configurações e o acesso deste projeto.</p>
    </div>
    <div class="lyra-pageheader__actions">
      <button class="lyra-btn lyra-btn--primary lyra-btn--md">Salvar alterações</button>
    </div>
  </div>
  <nav aria-label="Seções do projeto">
    <a href="#overview">Visão geral</a>
  </nav>
</header>

<lyra:page-header> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`title`	—	Obrigatória	`Reports`
`titleAs`	`'h1'`	—	—

blade

<lyra:page-header title="Website redesign" title-as="h1">
    <lyra:button variant="primary">New issue</lyra:button>
</lyra:page-header>