Skip to main content
PROYECTOVIVIANA

AlertDialog

A modal dialog that interrupts the user with important information, requiring an explicit action before continuing. Ideal for destructive actions and confirmations.

Import

import { AlertDialog, Button } from '@proyecto-viviana/solid-spectrum';

Destructive Action

Use variant='destructive' for irreversible actions like deleting data.

<AlertDialog
  title="Delete Item"
  variant="destructive"
  primaryActionLabel="Delete"
  cancelLabel="Cancel"
  onPrimaryAction={() => console.log('Deleted')}
  onCancel={() => console.log('Cancelled')}
  trigger={<Button variant="negative">Delete Item</Button>}
>
  Are you sure? This action cannot be undone.
</AlertDialog>

Confirmation

Use variant='confirmation' for actions that need user approval.

<AlertDialog
  title="Save Changes"
  variant="confirmation"
  primaryActionLabel="Save"
  cancelLabel="Discard"
  onPrimaryAction={() => console.log('Saved')}
  trigger={<Button variant="primary">Save Changes</Button>}
>
  You have unsaved changes. Would you like to save them?
</AlertDialog>

Information

Use variant='information' for important messages that need acknowledgment.

<AlertDialog
  title="Session Expiring"
  variant="information"
  primaryActionLabel="Stay Logged In"
  cancelLabel="Log Out"
  trigger={<Button variant="secondary">Show Session Warning</Button>}
>
  Your session will expire in 5 minutes.
</AlertDialog>

Props

PropTypeDefaultDescription
titlestring—Dialog title shown in the header
variant'destructive' | 'confirmation' | 'information''confirmation'Visual style and semantic meaning
primaryActionLabelstring—Label for the primary (confirm) button
cancelLabelstring—Label for the cancel/dismiss button
onPrimaryAction() => void—Called when the primary action is confirmed
onCancel() => void—Called when the dialog is cancelled or dismissed
triggerJSX.Element—Element that opens the dialog when pressed
childrenJSX.Element—The alert message body

Accessibility

  • Uses role="alertdialog" — announced immediately when opened
  • Focus is trapped inside the dialog until dismissed
  • Escape key cancels the dialog
  • The title is linked via aria-labelledby
  • The body text is linked via aria-describedby