Components
Dialog
Dialog, AlertDialog e Drawer: overlays modais, confirmações e painéis laterais. Fundo Bancada, escurecimento por trás e um único CTA em Volts por overlay.
Dialog
Modal centralizado para detalhes e formulários curtos. Fecha por overlay, tecla Esc ou botão.
AlertDialog
Confirmação bloqueante para ações consequentes. A variante destrutiva pinta a ação em vermelho, nunca em Volts.
Casos de uso
Fluxos reais de operação, como aprovação de deploy em produção e exclusão de branch, combinando confirmação e tom correto.
Drawer
Painel deslizante ancorado a uma borda. Direita para detalhes, esquerda para navegação, base para ações rápidas em telas pequenas.
Referência
| Componente | Props principais | Import |
|---|---|---|
| Dialog / DialogContent | showClose; Trigger + Close | @/components/ui/dialog |
| AlertDialogAction | destructive | @/components/ui/alert-dialog |
| DrawerContent | side (right | left | bottom) | @/components/ui/drawer |
| buttonVariants | estilo dos triggers e closes | @/components/ui/button |