Drawer

Drawer é um painel lateral controlado que entra pela direita. Escolha-o para um trabalho que fica ao lado da página; escolha Dialog quando a decisão precisar bloquear a página até ser resolvida.

Exemplos

Detalhes com ação fixa

Coloque no footer a ação que conclui a tarefa lateral. O painel mantém a página atrás dele, então a pessoa preserva seu contexto enquanto revisa ou altera algo pequeno.

Detalhes somente leitura

Omita footer quando não houver ação para fixar. Isso remove inteiramente o chrome do rodapé, em vez de deixar um divisor vazio no fim do painel.

Quando usar

Use Drawer para detalhes ou uma tarefa curta que se beneficia de manter a página visível: inspecionar um registro de atividade, editar poucos campos ou revisar contexto antes de uma ação.

Prefira outro componente quando:

Uma decisão precisa interromper o progresso — use Dialog, um modal central que deixa explícita a escolha bloqueante.
A tarefa precisa de destino próprio, histórico ou URL compartilhável — use uma rota. Um drawer mantém a página atual atrás dele; uma página inteira não.
A mensagem só confirma algo que já aconteceu — use Toast ou Alert inline.

Acessibilidade

O painel é role="dialog" com aria-modal="true", nomeado pelo title via aria-labelledby. title é o cabeçalho, não o atributo de tooltip HTML nativo.
Na abertura, o foco entra no painel e fica retido nele. No fechamento, volta ao elemento que o abriu; a rolagem do corpo fica bloqueada enquanto ele está aberto.
Escape, o botão de fechar e um clique no backdrop chamam onClose. O backdrop é uma conveniência apenas para ponteiro; quem usa teclado fecha com Escape ou com o botão de fechar.
O nome acessível do botão de fechar tem como padrão a string em inglês "Close". Passe closeLabel para traduzi-la em produtos localizados.
Por padrão, o componente é portado para document.body. Passe container apenas quando a aplicação precisar de outro host de portal.

API e código

Nome	Tipo	Obrigatória	Descrição
`open`	`boolean`	Obrigatória	Controls visibility. `true` mounts the portaled overlay and drawer panel.
`onClose`	`() => void`	—	Called when the user dismisses the drawer with Escape, the backdrop, or the close button.
`closeLabel`	`string`	—	Accessible name for the close button. Default: `"Close"`.
`title`	`ReactNode`	Obrigatória	Heading rendered in the drawer header and used as its accessible name.
`footer`	`ReactNode`	—	Fixed actions rendered in the footer. Omit to remove the footer chrome.
`container`	`HTMLElement`	—	Portal host. Defaults to `document.body`.
`children`	`ReactNode`	Obrigatória	Drawer body content.

x-data="lyraDrawer({ … })"

Opção	Tipo	Obrigatória	Descrição
`defaultOpen`	`boolean`	—
`labelId`	`string`	—

Sem React, componha as mesmas classes — estado de abertura, retenção de foco, bloqueio de rolagem e o caminho de Escape ficam com você:

html

<div class="lyra-drawer-overlay">
  <div class="lyra-drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
    <div class="lyra-drawer__header">
      <h2 class="lyra-drawer__title" id="drawer-title">Detalhes do projeto</h2>
      <button class="lyra-drawer__close" type="button" aria-label="Close">×</button>
    </div>
    <div class="lyra-drawer__body">Revise o último deploy antes de continuar.</div>
    <div class="lyra-drawer__footer">
      <button class="lyra-btn lyra-btn--primary lyra-btn--md" type="button">Concluir</button>
    </div>
  </div>
</div>

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

O comportamento vem de lyraDrawer() — instale @lyra-ds/alpine e veja a aba HTML + Alpine.

Prop	Padrão	Obrigatória	Valores de exemplo
`title`	—	Obrigatória	—
`closable`	`true`	—	—
`closeLabel`	`'Close'`	—	—
`defaultOpen`	`false`	—	—
`labelId`	`null`	—	—

blade

<lyra:drawer title="Project settings" close-label="Close">
    Rename the project, change its visibility or archive it.
</lyra:drawer>