Dialog

Confirmação ou formulário curto, por cima da página.

Quando usar

Arquivar, apagar, editar um registro. Para navegar, use a própria página.

Anatomia

Overlay, painel, fechar no canto, ações no rodapé.

import {
Dialog, DialogTrigger, DialogContent,
DialogHeader, DialogTitle, DialogFooter, Button,
} from "@sable/ui"

<Dialog>
<DialogTrigger asChild>
  <Button>Arquivar</Button>
</DialogTrigger>
<DialogContent>
  <DialogHeader>
    <DialogTitle>Arquivar pedido</DialogTitle>
  </DialogHeader>
  <DialogFooter>
    <Button variant="secondary">Cancelar</Button>
    <Button>Confirmar</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

Teclado