Drawer
Gaveta — um painel que desliza de uma borda da tela para uma tarefa que mantém a página à vista, como filtros, detalhes ou um carrinho. Ele é modal; para uma decisão rápida, use um diálogo.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no cliente.
import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose } from "@camaleo/react";Anatomia
O DrawerContent renderiza o fundo escurecido e o painel num portal, com o estilo, o modo e a cor da página em volta do gatilho. Só o corpo rola, então o cabeçalho e o rodapé ficam sempre à vista.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima. Todos começam fechados: abra e teste Tab, Escape e um clique no fundo escurecido.
Lados
Direita para detalhes e filtros, ao lado do conteúdo que eles mudam. Esquerda para navegação, onde fica o menu. Embaixo no celular, onde o polegar alcança.
Navegação no celular
Clique num link. O menu fecha, o foco volta para o botão do menu e uma mensagem de status diz qual página está aberta.
Filtros com Aplicar e Limpar
Mude alguns filtros. O botão principal conta os resultados enquanto você escolhe; nada muda na página até você apertar, e fechar sem apertar descarta as mudanças.
Conteúdo longo, ações à vista
Só o corpo rola, então Aceitar e Recusar ficam no rodapé enquanto a pessoa lê. Um corpo só com texto vira uma parada de Tab enquanto rola, para quem usa teclado conseguir rolar também.
Nome vindo do título
O DrawerTitle é o nome do diálogo e o DrawerDescription é lido logo depois. O × não tem texto, então passe um aria-label no idioma da página.
Painel de baixo
Uma lista curta de opções para o celular. Cada uma fecha o painel e conta o que aconteceu numa mensagem de status.
Aberto pelo código
Sem DrawerTrigger, controle com open e onOpenChange. O foco ainda volta para o botão que abriu.
Em contexto
São pedaços inteiros de interface para copiar, no estilo que você escolheu.
Atualizar a tabela de preços de abril
Prazo 01/04/2026 · Ana Ribeiro
Boas práticas
Editar o endereço ao lado do pedido a que ele pertence mantém a pessoa situada.
Um painel inteiro para uma frase e dois botões é demais. Use um diálogo de alerta, que ainda põe o foco na opção segura.
O DrawerFooter fica à vista enquanto a lista rola, então o próximo passo está sempre ali.
A pessoa precisa rolar 24 opções para descobrir como confirmar.
Props
onOpenChange para controlar pelo código."trap-focus" só prende o foco.eventDetails.O DrawerContent aceita as props do popup, incluindo initialFocus e finalFocus para escolher onde o foco vai ao abrir e ao fechar. O DrawerClose sem filhos renderiza o botão ×; passe aria-label no idioma da página (o padrão é "Close").
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou no próprio painel.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
/* um painel mais largo para o editor de pedidos */
.orders [data-slot="drawer-popup"][data-swipe-direction="right"] {
inline-size: min(36rem, calc(100vw - 3rem));
}Acessibilidade
- O painel é um diálogo modal: a página de trás fica escondida do leitor de tela, e um clique no fundo escurecido fecha o drawer.
- O DrawerTitle dá nome ao diálogo. Todo drawer precisa de um, mesmo que repita o texto do gatilho.
- Ao fechar, o foco volta para o gatilho, ou para o botão que abriu pelo código. Conte o resultado numa mensagem de status, porque o drawer que mostrava ele sumiu.
- Em tela de toque, arrastar na direção da borda fecha o painel. Todo gesto tem um botão como alternativa: o ×, uma ação do rodapé ou o Escape.