Components

Popover

Rich content anchored to a trigger, dismissed on outside click.

Usage

Basic

HTML
<bs:bsui-popover>
  <bs:bsui-popover-trigger trigger_label="Share" trigger_variant="outline" />
  <bs:bsui-popover-popup>
    <bs:bsui-text content="Anyone with the link can view this project." variant="muted" />
    <bs:bsui-input defaultValue="https://northwind.app/p/4kd9" />
  </bs:bsui-popover-popup>
</bs:bsui-popover>

Filter form

A select and a switch inside the popup, with the close button doubling as the apply action.

HTML
<bs:bsui-popover>
  <bs:bsui-popover-trigger trigger_label="Filter runs" trigger_variant="outline" />
  <bs:bsui-popover-popup>
    <bs:bsui-stack direction="column" gap="4" align="stretch">
      <bs:bsui-field>
        <bs:bsui-field-label text="Status" />
        <bs:bsui-select placeholder="Any status" defaultValue="failed">
          <bs:bsui-select-trigger />
          <bs:bsui-select-popup>
            <bs:bsui-select-option value="passed" label="Passed" />
            <bs:bsui-select-option value="failed" label="Failed" />
            <bs:bsui-select-option value="skipped" label="Skipped" />
          </bs:bsui-select-popup>
        </bs:bsui-select>
      </bs:bsui-field>
      <bs:bsui-switch label="Only my runs" defaultChecked="true" />
      <bs:bsui-popover-close label="Apply filters" />
    </bs:bsui-stack>
  </bs:bsui-popover-popup>
</bs:bsui-popover>

The popover anchors to its own trigger, so it can sit in a footer next to the primary action.

Quarterly report

Draft, last edited two hours ago.

HTML
<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Quarterly report" />
    <bs:bsui-card-description label="Draft, last edited two hours ago." />
  </bs:bsui-card-header>
  <bs:bsui-card-footer>
    <bs:bsui-popover>
      <bs:bsui-popover-trigger trigger_label="Share" trigger_variant="outline" />
      <bs:bsui-popover-popup>
        <bs:bsui-text content="Anyone with this link can comment." variant="muted" />
        <bs:bsui-input defaultValue="https://northwind.app/r/4kd9" />
        <bs:bsui-popover-close label="Copy link" />
      </bs:bsui-popover-popup>
    </bs:bsui-popover>
    <bs:bsui-button label="Publish" />
  </bs:bsui-card-footer>
</bs:bsui-card>

Corner dismiss

The x close renders a ghost icon button in the popup corner, leaving the body free for a call to action.

HTML
<bs:bsui-popover>
  <bs:bsui-popover-trigger trigger_label="What is new" trigger_variant="outline" />
  <bs:bsui-popover-popup>
    <bs:bsui-popover-close x="true" />
    <bs:bsui-text content="Release 2.4 is live" variant="title" tag="h4" />
    <bs:bsui-text content="Prerendering now covers logged in visitors on every static route." variant="muted" />
    <bs:bsui-button label="Read the changelog" href="/changelog/" variant="link" />
  </bs:bsui-popover-popup>
</bs:bsui-popover>

Anatomy

Popover is composed of the blocks below. Each one is a separate block that only renders inside its parent.

  • bsui/popover
  • bsui/popover-popup
  • bsui/popover-close
  • bsui/popover-trigger

Attributes

AttributeTypeDefault
defaultOpen toggle false

bsui/popover-popup

This block takes no attributes.

bsui/popover-close

AttributeTypeDefault
label richtext —
x toggle false

bsui/popover-trigger

AttributeTypeDefault
trigger text —
trigger_block text bsui/button
trigger_label richtext —
trigger_icon icon —
trigger_iconPosition left right left
trigger_href text —
trigger_variant default secondary outline ghost link destructive default
trigger_size default sm lg icon icon-sm default
trigger_disabled toggle false