Dialog

Janela modal para anunciar novidades e exibir lembretes que requerem atenção do usuário. Construído sobre Radix UI Dialog.

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogTitle, DialogDescription,
  DialogFooter,
} from "@workspace/ui/components/dialog";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Abrir</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Título</DialogTitle>
      <DialogDescription>Descrição</DialogDescription>
    </DialogHeader>
    {/* conteúdo */}
    <DialogFooter>
      <Button>Salvar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Novidade

Dialog para anunciar novos recursos ou funcionalidades da plataforma.

Lembrete

Dialog para lembretes de configuração ou ações pendentes do usuário.

API Reference

Prop	Type	Default	Descrição
`Dialog`	`Component`	—	Container raiz (controla estado aberto/fechado)
`DialogTrigger`	`Component`	—	Elemento que abre o dialog (use asChild)
`DialogContent`	`HTMLDivElement`	—	Container do conteúdo com overlay e animação
`DialogHeader`	`HTMLDivElement`	—	Seção de cabeçalho (título e descrição)
`DialogTitle`	`HTMLHeadingElement`	—	Título do dialog (obrigatório para acessibilidade)
`DialogDescription`	`HTMLParagraphElement`	—	Descrição contextual do dialog
`DialogFooter`	`HTMLDivElement`	—	Rodapé com ações (botões de confirmar/cancelar)
`showCloseButton`	`boolean`	true	Exibe o botão X de fechar no canto superior direito

Padrão de modais no SYSGO

Sheet (right) — Criar, editar e visualizar detalhes (consultoras, pedidos, produtos, cupons)
Dialog — Novidades e lembretes que requerem atenção
AlertDialog — Confirmações de ações destrutivas (excluir, cancelar)

Regra: Sheet para CRUD e navegação. Dialog para anúncios. AlertDialog apenas para confirmações destrutivas.