Dialog
Um modal acessível e animado para exibir conteúdo sobreposto à interface principal.
Utilização
index.tsx
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription
} from "@convertcompany/ui";
Exemplos
Headless
O componente HeadlessDialogContent é uma versão sem estilização do DialogContent, permitindo total liberdade de customização.
Importante
Sempre forneca um DialogTitle
O DialogTitle é essencial para acessibilidade, pois informa aos leitores de tela o propósito do diálogo.
Sem ele, o diálogo pode ser confuso para usuários com deficiência visual.
Se deseja ocultar o título visualmente, use className="sr-only" para escondê-lo, mas ainda assim fornecê-lo para leitores de tela.
Props
Este componente é baseado na biblioteca Radix UI Dialog. As props seguem os padrões definidos pela documentação oficial.
Dialog
| Propriedade | Tipo |
|---|---|
| childrenComponentes filhos como Trigger e Content. | ReactNode |
DialogTrigger
| Propriedade | Tipo |
|---|---|
| asChildPermite renderizar o trigger como um elemento filho. | boolean |
DialogContent, HeadlessDialogContent
| Propriedade | Tipo |
|---|---|
| childrenConteúdo principal do diálogo. | ReactNode |
| classNameClasse CSS adicional para estilização. | string |
DialogTitle
| Propriedade | Tipo |
|---|---|
| childrenTítulo do diálogo. | ReactNode |
| classNameClasse CSS adicional. | string |
DialogDescription
| Propriedade | Tipo |
|---|---|
| childrenDescrição ou explicação no corpo do diálogo. | ReactNode |
| classNameClasse CSS adicional. | string |
DialogHeader, DialogFooter
| Propriedade | Tipo |
|---|---|
| childrenAgrupamento de elementos no header ou footer. | ReactNode |
| classNameClasse CSS adicional. | string |