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.

Small Modal

Large Modal

Confirmation Modal

For destructive actions that need user confirmation before proceeding.

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

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.