Surface
Viewport

Presets

Props

Whether the modal is open
Modal width size
Modal header title
Allow closing via backdrop/esc/button

Slots

Usage

<Modal open title="Confirmation" size="md" on:close={() => (open = false)}>
    Are you sure you want to proceed with this action?
    <div slot="footer"><Button variant="ghost">Cancel</Button><Button variant="danger">Delete</Button></div>
</Modal>

Event Log

Interact with the component to see events

Accessibility

Uses role="dialog" and aria-modal="true". Supports Escape key close and backdrop click.