open- Type
boolean- Default
false- Description
- Visibility state of the dialog overlay.
Components / Feedback
Alert Dialog
எச்சரிக்கை உரையாடல்
Alert Dialogs interrupt the user with a required confirmation before a destructive or irreversible action. Unlike Dialog, they cannot be dismissed by clicking the backdrop.
எச்சரிக்கை உரையாடல்கள் அழிவுகரமான செயலுக்கு முன் கட்டாய உறுதிப்படுத்தலுடன் பயனரை நிறுத்துகின்றன.
Delete confirmation
Component preview
Irreversible actionமீட்க இயலாத செயல்Structure
Anatomy
5 parts documented for implementation and review.
1
AlertDialogContent
உள்ளடக்கம்required<div>The modal panel centered on screen with a dark overlay backdrop. Unlike Dialog, clicking the backdrop does NOT dismiss this component — the user must explicitly choose Cancel or Confirm. Applies role='alertdialog' for screen readers. Focus is trapped inside while open.
2
AlertDialogTitle
தலைப்புrequired<h2>Clearly states the consequence of the action. Should be phrased as a question — 'Delete account permanently?' not 'Delete'. Linked to the dialog via aria-labelledby. In Tamil, phrase naturally: 'கணக்கை நிரந்தரமாக நீக்கவா?'
3
AlertDialogDescription
விளக்கம்required<p>Explains what will happen and that it cannot be undone. Linked to the dialog via aria-describedby. Should state the specific data or resource affected. In bilingual UIs, Tamil description first, then English in muted text below.
4
AlertDialogCancel
ரத்துrequired<button>Safe exit button. Always the first button in the footer (left position). Styled as outline variant. Receives initial focus when the dialog opens. Pressing Escape triggers this action.
5
AlertDialogAction
செயல்required<button>The destructive action button. Styled with the destructive variant (red). Should repeat the verb from the title — if title says 'Delete', button says 'Yes, delete' not just 'OK'. Position after Cancel.
Dialog vs Alert Dialog
- Dialog — for non-destructive interactions: forms, previews, settings. Can be dismissed by pressing Escape or clicking the backdrop.
- Alert Dialog — for destructive or irreversible actions only. Cannot be accidentally dismissed. Always requires explicit Cancel or Confirm.
- Never use Alert Dialog for informational messages — use Alert or Toast instead.
API
Props
onOpenChange- Type
(open: boolean) => void- Default
- -
- Description
- Callback triggered upon visibility toggling.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Visibility state of the dialog overlay. |
onOpenChange | (open: boolean) => void | - | Callback triggered upon visibility toggling. |
Best practices
Phrase the title as a consequence question
தலைப்பை விளைவை கேட்கும் கேள்வியாக எழுதவும்
State what will happen: 'Delete account permanently?' is clear; users know the exact consequence before confirming.
'கணக்கை நிரந்தரமாக நீக்கவா?' என்று விளைவை கேளுங்கள் — பயனர் முடிவெடுப்பதற்கு முன் தெளிவாக புரியும்.
Don't use vague titles like 'Are you sure?'
'உறுதியா?' போன்ற தெளிவற்ற தலைப்பு பயன்படுத்தாதே
Vague titles give users no information about the consequence, leading to accidental destructive actions.
தெளிவற்ற தலைப்புகள் பயனருக்கு விளைவை புரியவைக்காது, தவறான செயல்களுக்கு வழிவகுக்கும்.
Use destructive variant on the confirm button
உறுதிப்படுத்தல் பொத்தானில் அழிவுகரமான வடிவம் பயன்படுத்தவும்
The confirm action button must use the destructive variant so users visually recognize the risk before clicking.
ஆபத்தான செயலுக்கு சிவப்பு நிற பொத்தான் பயன்படுத்துவது பயனரை எச்சரிக்கும்.
Don't use Alert Dialog for reversible actions
மீட்கக்கூடிய செயல்களுக்கு Alert Dialog பயன்படுத்தாதே
Alert Dialog is only for irreversible, destructive actions. Use Dialog for reversible ones like editing a profile.
மீட்கக்கூடிய செயல்களுக்கு Dialog போதுமானது — Alert Dialog அழிவுகரமான செயல்களுக்கு மட்டுமே.