AlertDialog

Diálogo modal de confirmação baseado em Radix UI. Bloqueia a interação até que o usuário responda. Suporta variante de ação destrutiva.

Demonstração

Props

Prop	Tipo	Padrão	Descrição
`AlertDialog`	`Radix Root`	`—`	Root component that controls open/closed state.
`AlertDialogTrigger`	`Radix Trigger`	`—`	Element that opens the dialog.
`AlertDialogContent`	`Radix Content`	`—`	The modal panel with overlay.
`AlertDialogTitle`	`Radix Title`	`—`	Accessible title of the dialog.
`AlertDialogDescription`	`Radix Description`	`—`	Accessible description of the dialog.
`AlertDialogAction`	`Radix Action`	`—`	Confirm/proceed button. Closes the dialog.
`AlertDialogCancel`	`Radix Cancel`	`—`	Cancel button. Closes the dialog without action.
`variant (Action)`	`'default' \| 'destructive'`	`'default'`	Variante do botão de ação: default ou destrutivo.

Uso

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent,
  AlertDialogHeader, AlertDialogFooter,
  AlertDialogTitle, AlertDialogDescription,
  AlertDialogAction, AlertDialogCancel,
} from '@ghiberti85/ui'

// Default
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

// Destructive variant
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>

Ver no Storybook

Abrir no Storybook →

←DropdownMenu Combobox→