Alert Dialog
StableDialog que se recusa a ser dispensado por acidente: sem botão de fechar no canto, sem clique fora, e com o foco começando na escolha segura — a ação destrutiva fica a um Tab, nunca a um Enter. Composto sobre Base UI AlertDialog e sobre o Button do Up Web DS. Esse custo só se paga por uma decisão que não dá para desfazer; tudo o mais pertence ao Dialog.
Instalação
npx up-web-ds add alert-dialogPreview
Default
With Media
Compact
Non Destructive
All states
Default
With Media
Compact
Non Destructive
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- overlay
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / alert-dialog
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: ao abrir, o foco vai para a escolha segura em vez do popup, Tab percorre as duas ações e volta ao início em vez de escapar para a página atrás, e Escape continua fechando e devolvendo o foco ao gatilho — um modal sem saída de teclado é armadilha, não salvaguarda. Leitor de tela verificado por teste: o papel é alertdialog e não dialog, o popup é nomeado pelo título e descrito pela descrição, e o rodapé expõe exatamente duas ações nomeadas, sem nenhum controle que signifique "nenhuma das duas". Clique fora é recusado por teste. Touch verificado em navegador com emulação de toque em viewport de 375px: as ações medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, empilham em coluna abaixo de sm e a superfície cabe na viewport. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a entrada do popup e do scrim medem 0.001s.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- Nenhum
- Construído sobre
- Button
- Usado por
- Nenhum ainda