Overlay
Components that appear above the main content: dialogs, tooltips, and contextual menus.
Dialog
Dialogs interrupt user workflow to request action or provide critical information.
Static Preview
Confirm action
Are you sure you want to proceed? This action cannot be undone.
Interactive Demo
Hello!
This dialog was triggered by clicking the button above. Close it by clicking the backdrop, the ✕ icon, or the Close button.
<div class="kds-dialog kds-dialog--open" role="dialog"
aria-modal="true">
<div class="kds-dialog__backdrop"></div>
<div class="kds-dialog__panel kds-dialog__panel--sm">
<div class="kds-dialog__header">
<h2 class="kds-dialog__title">Title</h2>
<button class="kds-icon-btn kds-icon-btn--sm kds-btn--ghost">✕</button>
</div>
<div class="kds-dialog__body">…</div>
<div class="kds-dialog__footer">
<button class="kds-btn kds-btn--outline kds-btn--neutral">Cancel</button>
<button class="kds-btn kds-btn--solid">Confirm</button>
</div>
</div>
</div>
<!-- Panel sizes: --sm | --md | --lg | --xl -->
Tooltip
Tooltips provide additional context on hover or focus.
<span class="kds-tooltip" data-tooltip="Tooltip text">
<button class="kds-btn kds-btn--outline">Hover me</button>
</span>
<!-- Placement: (default top) | --bottom | --left | --right -->
Menu
Contextual menus for actions, with keyboard shortcuts and dividers.
<div class="kds-menu">
<button class="kds-btn">Actions ▼</button>
<!-- Add class 'kds-menu--open' to the wrapper to show -->
<div class="kds-menu__list kds-menu__list--bottom" role="menu">
<div class="kds-menu__label">Edit</div>
<button class="kds-menu__item" role="menuitem">
<span class="kds-menu__item-label">Undo</span>
<span class="kds-menu__item-shortcut">⌘Z</span>
</button>
<div class="kds-menu__separator"></div>
<button class="kds-menu__item kds-menu__item--danger">
<span class="kds-menu__item-label">Delete</span>
<span class="kds-menu__item-shortcut">⌫</span>
</button>
</div>
</div>