Components / Alert Dialog
Alert Dialog
Destructive confirmation dialog with alertdialog ARIA role. Uses danger styling, focuses cancel button by default for safety, and supports custom actions via slot.
overlays v0.7.0
Playground
Examples
Delete confirmation
<cg-button variant="danger" onclick="this.nextElementSibling.open=true">Delete Project</cg-button><cg-alert-dialog title="Delete project?" description="This will permanently delete the project and all its data. This action cannot be undone." destructive confirm-label="Delete" closable></cg-alert-dialog>Standard confirm
<cg-button onclick="this.nextElementSibling.open=true">Submit</cg-button><cg-alert-dialog title="Submit form?" description="Your changes will be sent for review. You can still edit them later." confirm-label="Submit" closable></cg-alert-dialog>Import
import { CgAlertDialog } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-alert-dialog';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Open state |
title | string | "" | Dialog title |
description | string | "" | Supporting description text |
confirm-label | string | "Confirm" | Confirm button label |
cancel-label | string | "Cancel" | Cancel button label |
destructive | boolean | false | Use danger styling for confirm button |
loading | boolean | false | Show loading state on confirm |
closable | boolean | false | Allow Escape/backdrop close |
Events
| Event | Detail | Description |
|---|---|---|
cg-alert-confirm | {} | Confirm button clicked |
cg-alert-cancel | {} | Cancel button clicked |
cg-alert-open | {} | Dialog opened |
cg-alert-close | {} | Dialog closed |