A dialog overlay that focuses user attention on a task or confirmation. Use sparingly.
Preview
Code
VUE
<Modal />Props
Dialog heading
Dialog body content
Width of the dialog
Displays action buttons in the footer
Closes the modal when clicking the backdrop
Props API
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | "Confirm action" | — | Dialog heading |
description | string | "Are you sure you want to proceed? This cannot be undone." | — | Dialog body content |
size | select"sm" | "md" | "lg" | "full" | "md" | — | Width of the dialog |
showFooter | boolean | true | — | Displays action buttons in the footer |
closeOnOverlay | boolean | true | — | Closes the modal when clicking the backdrop |
Usage
Use modals only when an action requires immediate attention or confirmation. For simple messages, prefer an inline alert or toast. Always provide a clearly labeled way to dismiss.
Accessibility
Uses role="dialog" with aria-modal="true".
Focus is trapped inside the modal while it is open.
Pressing Escape closes the dialog.
Focus returns to the triggering element when the modal closes.