Alert Dialog

Features

• Confirmation alert dialog with a destructive primary action and a safe cancel action
• Uses role="alertdialog" so assistive tech treats it as an urgent, blocking prompt
• Scale-and-fade entrance built purely from transform and opacity
• Backdrop scrim with a configurable blur driven by a token
• Live result line announces the chosen outcome via aria-live
• Focus moves to the safe Cancel action on open and returns to the trigger on close
• Focus is trapped inside the dialog while it is open
• Closes via Not now, Publish, an overlay click, or the Escape key — defaulting to cancel
• Dark and light theming driven by the host shell toggling body.dark
• Responsive layout that adapts padding down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Alert role

role="alertdialog" with aria-modal="true" on the dialog

Labelling

aria-labelledby and aria-describedby point at the title and text

Default focus

Focus lands on the safe Cancel action on open

Focus management

Focus returns to the trigger on close

Focus trap

Tab and Shift+Tab cycle within the dialog while open

Escape and overlay

Escape and overlay click both default to cancel

Live result

aria-live="polite" on the result line announces the outcome

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Alert Dialog in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dialog is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.