Dialogs & drawers

Production-minded patterns. Real examples. Make them yours.

Dialogs

A focused space for an important action. This dialog supports Escape, keyboard focus, and an accessible title.

View source example 
<p class="p-note">A focused space for an important action. This dialog supports Escape, keyboard focus, and an accessible title.</p>
<button type="button" class="btn btn-primary" data-premium-dialog>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8m-4-4v4"/>
</svg>Open dialog</button>

Open side drawer

A reusable detail view with linked records, activity and actions.

View source example 
<p class="p-note">A reusable detail view with linked records, activity and actions.</p>
<button type="button" class="btn btn-primary" data-premium-drawer>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 6h16M4 12h16M4 18h16"/>
</svg>Open side drawer</button>

Confirm an action

This example affects demo data only.

View source example 
<p class="p-note">This example affects demo data only.</p>
<button type="button" class="btn btn-outline" data-premium-confirm>
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m12 2 8 3v6c0 6-8 11-8 11S4 17 4 11V5l8-3Z"/>
<path d="m8 12 3 3 5-6"/>
</svg>Confirm an action</button>

Action menu

Actions
Product catalogue Contact directory Support tickets
View source example 
<details class="action-dropdown">
<summary class="btn btn-secondary">Actions<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 9 6 6 6-6"/>
</svg>
</summary>
<div class="dropdown-links">
<a href="pages/commerce/catalog.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 7h14l2 14H3L5 7Z"/>
<path d="M8 8V6a4 4 0 0 1 8 0v2"/>
</svg>Product catalogue</a>
<a href="pages/workspace/contacts.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="9" cy="8" r="3"/>
<path d="M3 21v-2a6 6 0 0 1 12 0v2M16 5a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 4v2"/>
</svg>Contact directory</a>
<a href="pages/workspace/tickets.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M21 11a9 9 0 0 1-9 9H4l-3 2 2-7a9 9 0 1 1 18-4Z"/>
<path d="M7 10h10m-10 4h6"/>
</svg>Support tickets</a>
</div>
</details>

Notifications

View source example 
<div class="flex wrap">
<button type="button" class="btn btn-primary" data-premium-toast="success">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m5 12 4 4L20 5"/>
</svg>Success</button>
<button type="button" class="btn btn-danger" data-premium-toast="error">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m6 6 12 12M6 18 18 6"/>
</svg>Error</button>
</div>