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-closeattribute
<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>
Example Modal
This is a standard modal with a title and content area.
You can put any content here including forms, images, or other components.
Small Modal
A smaller modal for simple messages.
Large Modal
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.
Delete this item?
Right Drawer
This drawer slides in from the right side of the screen.
It's great for navigation menus, settings panels, or detail views.
Left Drawer
This drawer slides in from the left side of the screen.
Commonly used for mobile navigation menus.
Small Drawer
A smaller drawer for quick actions.
Large Drawer
A larger drawer for more complex content.
This gives you more space for forms, lists, or detailed information.