open- Type
boolean- Default
- -
- Description
- Controlled open state.
Components / Feedback
Dialog
உரையாடல்
Dialogs are modal overlays that focus the user's attention on a critical task or confirmation. They block the page until dismissed.
உரையாடல்கள் பயனரின் கவனத்தை ஒரு முக்கியமான பணி அல்லது உறுதிப்படுத்தலில் மையப்படுத்தும் மாடல் மேல்படிவுகள்.
Confirmation dialog
Component preview
Delete confirmationநீக்கம் உறுதிப்படுத்தல்Form dialog
Component preview
Edit profile dialogசுயவிவர திருத்தம்Structure
Anatomy
5 parts documented for implementation and review.
1
Overlay backdrop
மேல்படிவு<div>Semi-transparent dark backdrop (bg-black/50) covering the viewport. Clicking it closes the dialog. Animates in with a fade transition. Uses fixed z-50 positioning. Prevents interaction with content behind the dialog and locks body scroll.
2
DialogContent
உரையாடல் உள்ளடக்கம்required<div>Centered modal panel with role='dialog'. Focus is trapped inside while open — Tab cycles through focusable elements, Escape closes. Max-width controlled via sm:max-w-md or sm:max-w-lg classes. Animates in with scale and fade (zoom-in-95).
3
DialogHeader + Title
தலைப்புrequired<div>Container for DialogTitle (required for accessibility via aria-labelledby) and DialogDescription (linked via aria-describedby). Title should clearly state the dialog purpose. DialogDescription provides supporting context. In Tamil, use natural phrasing.
4
DialogFooter
அடிக்குறிப்பு<div>Action bar at the bottom with flex layout. Convention: Cancel on left (outline variant), primary action on right. On mobile (sm breakpoint), buttons may stack vertically. Include both Tamil and English labels in bilingual contexts.
5
Close button
மூடு பொத்தான்<button>X icon button in the top-right corner, always present for accessibility. Sized at 16×16px icon within a 32×32px touch target. Provides an alternate dismissal path alongside Escape key. Uses aria-label='Close' for screen readers.
API
Props
onOpenChange- Type
(open: boolean) => void- Default
- -
- Description
- Fired when dialog opens or closes.
modal- Type
boolean- Default
true- Description
- When true, locks scroll and traps focus.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | Controlled open state. |
onOpenChange | (open: boolean) => void | - | Fired when dialog opens or closes. |
modal | boolean | true | When true, locks scroll and traps focus. |
Best practices
Provide explicit interaction context
தெளிவான செயல் முன்னறிவிப்பை வழங்குதல்
Trigger labels must precisely forecast the resulting action. Avoid ambiguous verbs like 'Open'. Use explicit action-object pairs (e.g., 'Edit profile') to establish correct mental models before the context switch.
பயனர் எந்தச் செயலை செய்யப் போகிறார் என்பதை தூண்டிப் பொத்தான்கள் தெளிவாகக் கூற வேண்டும். 'திற' போன்ற பொதுவான வார்த்தைகளைத் தவிர்த்து, 'சுயவிவரம் திருத்து' போன்ற தெளிவான கட்டளைகளைப் பயன்படுத்தவும்.
Never use standard Dialogs for destructive flows
அழிவுகரமான செயல்களுக்கு சாதாரண உரையாடல்களைப் பயன்படுத்தக் கூடாது
Standard dialogs lack the friction required to prevent catastrophic errors because they can be dismissed via an accidental Escape keypress or backdrop click. Always use an isolated AlertDialog.
சாதாரண உரையாடல்களைப் பின்னணியைத் தொடுவதன் மூலம் எளிதாக மூடிவிட முடியும் என்பதால், நிரந்தரமான அழிவுச் செயல்களுக்குப் போதுமான தடையை அவை வழங்குவதில்லை. எப்போதும் AlertDialog-ஐப் பயன்படுத்தவும்.
Enforce strict progressive disclosure
ஒற்றைப் பணி மையப்படுத்தலைப் பேணுதல்
Dialogs must maintain single-task focus. Offload complex configurations to dedicated pages and use dialogs strictly for rapid, localized state mutations without breaking the primary workflow context.
உரையாடல்கள் ஒரு குறிப்பிட்ட பணியை விரைவாகச் செய்து முடிக்க மட்டுமே பயன்படுத்தப்பட வேண்டும். சிக்கலான படிவங்களை நிரப்புவதற்குப் பதிலாக, எளிய மாற்றங்களுக்கு மட்டுமே இவற்றைத் தேர்ந்தெடுக்கவும்.
Avoid cognitive overload via complex forms
கடினமான படிவங்களால் மனச்சோர்வை ஏற்படுத்தக் கூடாது
Never inject massive, multi-step forms or heavy vertical scrolling inside a modal overlay. If a task requires more than 3-4 inputs, it fundamentally violates the modal interaction pattern.
பெரிய படிவங்களையோ, பல-படிநிலைச் செயல்களையோ உரையாடலுக்குள் திணிக்கக் கூடாது. 3-4 உள்ளீடுகளுக்கு மேல் தேவைப்பட்டால், அதை ஒரு தனிப்பக்கமாக உருவாக்குவதே சிறந்த வடிவமைப்பாகும்.