Duskmoon UI v10.0.11
Theme
Dialog dm_modal
## Overview Modal dialog using the native HTML `<dialog>` element and `@duskmoon-dev/core` dialog CSS. Open and close with the Invoker Commands API (`command` / `commandfor`). ## Usage ```elixir <.dm_modal id="my-modal"> <:trigger :let={id}> <.dm_btn variant="primary" command="show-modal" commandfor={id}>Open</.dm_btn> </:trigger> <:title>Modal Title</:title> <:body>Modal content here</:body> <:footer> <.dm_btn command="close" commandfor="my-modal">Cancel</.dm_btn> <.dm_btn variant="primary" command="close" commandfor="my-modal">Confirm</.dm_btn> </:footer> </.dm_modal> ```

Basic Modal

Basic Modal

This is a basic modal dialog with a title, body, and footer.

Sizes

Small Modal

A small modal dialog.

Large Modal

A large modal dialog.

Extra Large Modal

An extra large modal dialog.

Positions

Top Modal

This modal appears near the top of the viewport.

Bottom Modal

This modal appears near the bottom of the viewport.