# 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.