Next Drawer

Basic modal

Standard modal with title, body, and action buttons. Triggered by a button, dismissed via backdrop click, the × button, or Cancel.

Confirm action

Are you sure you want to proceed? This action cannot be undone.

Sizes

Small for quick prompts, default for most use cases, large for content-heavy dialogs like forms or previews.

Delete item?

This will permanently remove the item from your store.

Publish product

Review the details before making this product visible to customers.

  • • Product name: Leather Tote Bag
  • • Price: Rp 450.000
  • • Stock: 12 units

Add new product

Fill in the product details below.

Variants

Semantic intent variants for common modal types: info, success, warning, and destructive (danger).

Scheduled maintenance

Your store will be unavailable on Sunday, 22 Jun from 02:00–04:00 WIB for a platform upgrade. No action required.

Order placed!

Order #10291 has been confirmed. The customer will receive a confirmation email shortly.

Unsaved changes

You have unsaved changes to this product. Leaving now will discard them.

Delete store?

This will permanently delete Toko Kita and all its data including products, orders, and customer records. This cannot be undone.

Scrollable body

When modal content exceeds the viewport height, the body scrolls independently while the header and footer remain fixed.

Terms & conditions

1. Section heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Section heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

3. Section heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Section heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

5. Section heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

6. Section heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

7. Section heading 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

8. Section heading 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Loading state

Modal with an async confirmation action — shows a spinner while the operation is in progress and disables the action button to prevent double-submit.

Export all orders

This will generate a CSV file containing all orders from the last 90 days. The download will start automatically.

Nested modal

A secondary confirmation dialog stacked on top of a primary modal. Useful for destructive actions triggered from within a form modal.

Edit customer

Update the customer's details or remove them from the system.

Remove customer?

Dewi Rahayu and all associated data will be permanently deleted.

States

Empty state when no data is available, and an inline error state when a modal action fails.

Select product

No products found

Add a product first to select it here.

Save changes

Update your store's display name.

Failed to save. Please try again.
9

Drawer

Side-anchored sliding panel for detail views and actions.

Offcanvas

Off-screen panel that slides in from any edge.

Tooltip

Small contextual label appearing on hover or focus.

Popover

Rich contextual popup with title, content, and arrow.

Alert Dialog

Blocking confirmation dialog requiring user action.

Lightbox

Full-screen media viewer with navigation controls.

Cookie Notice

GDPR-compliant cookie consent banner with accept/decline.

Age Verification

Age gate overlay requiring confirmation before content access.

Announcement Popup

Promotional modal for announcements, offers, and news.
Next Drawer