title: Modals page: modals

Modals

Dialog overlays and slide-in panels for focused interactions and confirmations.

Standard Modal

Click the button to open a standard modal dialog.

<button w-modal-trigger="demo-modal">Open</button> <modal id="demo-modal" title="Modal Title"> Modal content here... </modal>

Modal Sizes

Modals come in different sizes for various content needs.

<modal id="small-modal" title="Small" size="modal-sm"> ... </modal> <modal id="large-modal" title="Large" size="modal-lg"> ... </modal>

Confirmation Dialog

For destructive actions that need user confirmation before proceeding.

<confirm-modal id="confirm-modal" title="Delete Item?" message="This cannot be undone." confirmText="Delete" confirmClass="btn-danger" />

Drawer (Slide-in Panel)

Drawers slide in from the edge of the screen for navigation or detail panels.

<w-drawer id="drawer-right" title="Right Drawer" position="right"> Drawer content here... </w-drawer> <!-- Positions: right, left, top, bottom --> <!-- Sizes: drawer-sm, drawer-lg, drawer-xl -->

Drawer Sizes

Drawers can be sized to fit different content requirements.

<w-drawer size="drawer-sm">...</w-drawer> <w-drawer size="drawer-lg">...</w-drawer> <w-drawer size="drawer-xl">...</w-drawer>

Closing Modals & Drawers

Multiple ways to dismiss modal dialogs and drawers.

  • Clicking the X button
  • Clicking the backdrop (outside the modal/drawer)
  • Pressing the ESC key
  • Any element with w-modal-close attribute
<button w-modal-close>Cancel</button> <!-- Inside modal footer --> <div class="modal-footer"> <button w-modal-close>Cancel</button> <button class="btn btn-primary">Save</button> </div>

This is a standard modal with a title and content area.

You can put any content here including forms, images, or other components.

A smaller modal for simple messages.

A larger modal for more complex content.

This gives you more space to work with when you need to display forms, tables, or detailed information.

This drawer slides in from the right side of the screen.

It's great for navigation menus, settings panels, or detail views.

This drawer slides in from the left side of the screen.

Commonly used for mobile navigation menus.

A smaller drawer for quick actions.

A larger drawer for more complex content.

This gives you more space for forms, lists, or detailed information.