Popover

Import: @bnotk/dsx/css/popover.css

Live Preview

This module is usually not shown on its own in product UI. It is the panel primitive used inside richer controls such as multi-selects, filter dropdowns, and token pickers.

Classes

Class	Description
`.dsx-popover`	Base popover panel
`.dsx-popover--small`	Compact option sizing
`.dsx-popover--dividers`	Adds separators between adjacent options
`.dsx-popover__option`	Base option element
`.dsx-popover__option--clickable`	Interactive option state

Examples

<div class="dsx-field">
  <label class="dsx-field__label">Assignees</label>
  <div class="dsx-popover dsx-popover--small dsx-popover--dividers" role="listbox" aria-label="Assignee selection">
    <button class="dsx-popover__option dsx-popover__option--clickable" type="button" role="option">
      Legal
    </button>
    <button class="dsx-popover__option dsx-popover__option--clickable" type="button" role="option">
      Operations
    </button>
    <button class="dsx-popover__option dsx-popover__option--clickable" type="button" role="option">
      Customer success
    </button>
  </div>
</div>