Modal
Accessible dialogs with variants, subtle motion, and thoughtful defaults.
Classic Confirmation
Use for destructive or high-signal actions.
Variant: classic
Glass Info
A frosted panel for light, non-blocking content.
Variant: glass
Danger + Large
Prominent header line signals a risky operation.
Variant: danger · Size: lg
Props
Control size, variant, and accessibility labels. Bind
show
to LiveView state and use open-modal/close-modal events as shown.
| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique id for dialog and accessibility hooks. |
| show | boolean | false | Controls visibility; bind to LiveView assigns. |
| size | :sm | :md | :lg | :xl | :md | Max width of the dialog frame. |
| variant | :classic | :glass | :danger | :classic | Visual style for the frame and header. |
| title (slot) | slot | — | Dialog title area. |
| footer (slot) | slot | — | Actions area; place primary action last. |