Alert Dialog

Diálogo modal de confirmação que interrompe o fluxo do usuário para ações irreversíveis. Construído sobre Radix UI AlertDialog. Diferente do Dialog, não permite fechar clicando fora.

import {
  AlertDialog, AlertDialogAction, AlertDialogCancel,
  AlertDialogContent, AlertDialogDescription,
  AlertDialogFooter, AlertDialogHeader,
  AlertDialogTitle, AlertDialogTrigger,
} from "@workspace/ui/components/alert-dialog";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Excluir</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Tem certeza?</AlertDialogTitle>
      <AlertDialogDescription>
        Essa ação não pode ser desfeita.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancelar</AlertDialogCancel>
      <AlertDialogAction>Confirmar</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Confirmação de exclusão

Padrão SYSGO: ícone circular, título, descrição com nome em destaque e botões lado a lado.

DeleteConfirmationDialog

Componente pronto do @workspace/ui que encapsula o padrão acima com loading e tratamento de erros.

import { DeleteConfirmationDialog } from "@workspace/ui/components/delete-confirmation-dialog";

<DeleteConfirmationDialog
  open={open}
  onOpenChange={setOpen}
  onConfirm={handleDelete}
  itemName="Claudia Mendes LTDA"
  itemLabel="a consultora"
  isLoading={isDeleting}
/>

Cancelamento de pedido

Mesmo padrão visual adaptado para cancelamento.

Quando usar cada componente

Padrão de uso de modais no SYSGO.

Componente	Quando usar	Exemplos
`Sheet`	Criar, editar e visualizar detalhes de registros	Criar consultora, editar produto, ver detalhes do pedido
`AlertDialog`	Confirmações de ações irreversíveis e destrutivas	Excluir registro, cancelar pedido, revogar acesso

Regra: Sheet para criar/editar/visualizar detalhes, AlertDialog apenas para confirmações destrutivas. Não usamos Dialog para formulários — o Sheet lateral oferece mais espaço e melhor UX nos portais.

API Reference

Prop	Type	Default	Descrição
`open`	`boolean`	—	Controla o estado aberto/fechado
`onOpenChange`	`(open: boolean) => void`	—	Callback quando o estado muda
`AlertDialogAction`	`ReactNode`	—	Botão de confirmação (usa estilo Button padrão)
`AlertDialogCancel`	`ReactNode`	—	Botão de cancelamento (usa estilo Button outline)