Components / Overlays
AlertDialog Stable An interruptive dialog that asks the user to confirm or cancel an important action.
AlertDialog is for decisions with consequences, such as deleting a template or revoking access. Unlike Dialog it cannot be dismissed by clicking outside, it has no close icon, and focus starts on the least destructive option. For the common confirm/cancel case with async handling, use ConfirmationDialog.
Overview Delete template
tsx Copy
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';
export function Destructive() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="danger">Delete template</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete “Sales, EMEA”?</AlertDialogTitle>
<AlertDialogDescription>
32 people use this signature. They will fall back to your organisation default.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel asChild>
<Button variant="outline">Cancel</Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button variant="danger">Delete template</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}Light, dark and high contrast Every Stance component is designed and tested in all three appearance modes.
Import tsx Copy
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@bindshq/stance-react';AlertDialog has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
Web · React iOS and iPadOS · SwiftUI Android · Jetpack Compose
tsx Copy
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogBody, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@bindshq/stance-react';Examples Publish changes
tsx Copy
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';
export function NonDestructive() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button>Publish changes</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Publish to all mailboxes?</AlertDialogTitle>
<AlertDialogDescription>
Your updated signature will reach 128 people on the next sync.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel asChild>
<Button variant="outline">Not yet</Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button>Publish</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}Use the body for consequences the user should weigh.
Disconnect Azure
tsx Copy
import { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@bindshq/stance-react';
export function WithDetails() {
return (
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Disconnect Azure</Button>
</AlertDialogTrigger>
<AlertDialogContent size="md">
<AlertDialogHeader>
<AlertDialogTitle>Disconnect Azure AD?</AlertDialogTitle>
<AlertDialogDescription>Directory sync stops immediately.</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogBody>
<ul style={{ margin: 0, paddingLeft: 20 }}>
<li>New starters will no longer receive signatures automatically.</li>
<li>Existing signatures stay in place until changed.</li>
<li>You can reconnect at any time from Integrations.</li>
</ul>
</AlertDialogBody>
<AlertDialogFooter>
<AlertDialogCancel asChild>
<Button variant="outline">Keep connected</Button>
</AlertDialogCancel>
<AlertDialogAction asChild>
<Button variant="danger">Disconnect</Button>
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}Accessibility Uses role="alertdialog" with aria-modal, named by the title and described by the description. Initial focus is on Cancel so an accidental Enter never triggers the destructive action. Outside clicks do not dismiss; Escape cancels. Focus is trapped and returns to the trigger on close. Keyboard Usage guidelines Do Phrase the title as a question naming the object: “Delete ‘Sales signature’?” Label the action with the verb, not “OK”. Don’t Use for information-only messages. Stack alert dialogs or show them on page load.