Componentes

Bottom Sheet

Painel que sobe do rodapé com overlay escuro. Usado para ações contextuais, formulários rápidos e seleção de opções sem sair da tela atual.

Visão geral

conteúdo da tela

Editar disco

Anatomia

Título da ação 4

Área de conteúdo

Overlay

fixed inset-0 bg-black/60 z-40 · toque fecha a sheet

Container da sheet

fixed inset-x-0 bottom-0 z-50 bg-[#1a1a1a] rounded-2xl rounded-b-none px-4 pt-3 pb-8

Handle

w-10 h-1 rounded-full bg-[#333] mx-auto mb-5 · obrigatório em toda sheet

Título (opcional)

text-[#f5f5f5] font-bold text-base mb-4

Área de conteúdo

Livre — campos, lista, botões. Scroll interno se ultrapassar 80vh.

Variantes

Lista de ações

Quando usar

Ações contextuais de um item (long press ou botão "…"). Sem título. Cada ação em py-3.5.

Ação destrutiva

text-[#ef4444] · sempre última da lista

Com formulário

Nova lista

Nome da lista

Quando usar

Formulários curtos (1–3 campos). Título obrigatório. Botão primário + ghost "Cancelar".

Atenção

Adicionar pb-safe extra para não colidir com teclado virtual no iOS.

Comportamento

Abrir

translateY(100%) → translateY(0)

duration-200 ease-out · overlay faz fade-in simultâneo

Fechar

translateY(0) → translateY(100%)

duration-200 ease-in · disparado por: toque no overlay, swipe down, botão cancelar

Swipe

drag handle

Arrastar o handle (ou a sheet inteira) para baixo fecha. Threshold: 1/3 da altura da sheet ou velocidade > 500px/s

Com teclado

keyboard-aware

Sheet sobe junto com o teclado. pb-safe garante espaço abaixo do botão principal.

Do / Don't

Editar

Remover

Faça Handle sempre visível. Overlay escuro. Ação destrutiva em vermelho, sempre por último.

Evite Sem handle, sem overlay, ação destrutiva em primeiro lugar e como botão filled vermelho.

Bottom sheet

Formulário de 1–3 campos

Ações rápidas de contexto

Confirmação de ação

Faça Use sheets para tarefas rápidas e contextuais que não exigem navegação.

Bottom sheet

Formulário com 6+ campos

Navegação entre seções

Conteúdo longo com scroll

Evite Tarefas complexas merecem uma tela dedicada, não uma sheet.

Specs

Elemento	Propriedade	Valor
Overlay	Background	`rgba(0,0,0,0.6)`
Overlay	z-index	`z-40`
Sheet	Background	`#1a1a1a`
Sheet	Border radius	`rounded-2xl rounded-b-none` (20px topo)
Sheet	Padding	`px-4 pt-3 pb-8`
Sheet	z-index	`z-50`
Handle	Tamanho	`w-10 h-1` (40×4 px)
Handle	Cor	`#333`
Handle	Margem	`mx-auto mb-5`
Animação	Abrir/fechar	`translateY · duration-200 · ease-out/ease-in`
Ação item	Padding	`py-3.5 px-5`
Ação item	Ícone	Lucide `18×18` · `mr-3.5`
Ação destrutiva	Cor	`#ef4444` · sempre última