Dialog overlays and slide-in panels for focused interactions and confirmations.
Click the button to open a standard modal dialog with a title, content area, and close button.
Modals come in different sizes for various content needs.
For destructive actions that need user confirmation before proceeding.
Drawers slide in from the edge of the screen for navigation or detail panels.
Drawers can be sized to fit different content requirements.
There are multiple ways to dismiss modal dialogs and drawers:
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.
A compact modal for simple messages or quick confirmations.
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.
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.
This drawer slides in from the left side of the screen.
Left drawers are commonly used for mobile navigation menus or sidebar content.
A smaller drawer for quick actions or compact content.
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.
Content for the first column.
Content for the second column.