Modals & Drawers
Dialog overlays and slide-in panels for focused interactions and confirmations.
Standard Modal
Click the button to open a standard modal dialog with a title, content area, and close button.
Modal Sizes
Modals come in different sizes for various content needs.
Confirmation Modal
For destructive actions that need user confirmation before proceeding.
Drawers
Position
Drawers slide in from the edge of the screen for navigation or detail panels.
Sizes
Drawers can be sized to fit different content requirements.
Closing Modals & Drawers
There are multiple ways to dismiss modal dialogs and drawers:
- Clicking the X button in the header
- Clicking the backdrop (outside the modal or drawer)
- Pressing the ESC key
- Any element with the w-modal-close attribute
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.
Click the X button, click outside, or press ESC to close.
Small Modal
A compact modal for simple messages or quick confirmations.
Large Modal
A larger modal for more complex content that needs more space.
This gives you room to display forms, tables, detailed information, or multi-step workflows without feeling cramped.
Delete this item?
Reset all settings?
Right Drawer
This drawer slides in from the right side of the screen.
It is commonly used for detail panels, settings, or side navigation on desktop layouts.
Left Drawer
This drawer slides in from the left side of the screen.
Left drawers are commonly used for mobile navigation menus or sidebar content.
Small Drawer
A smaller drawer for quick actions or compact content.
Large Drawer
A larger drawer for more complex content that needs additional horizontal space.
This gives you room for forms, data tables, or multi-column layouts inside the panel.
Section A
Content for the first column.
Section B
Content for the second column.