Popover

An accessible popup anchored to a button. The trigger matches Button: no border, a wash, and a lightness shift on hover and focus. The popup has no stroke and the arrow matches that surface. The title and description are Light.

Anatomy

<UiPopoverRoot>
  <UiPopoverTrigger>Open</UiPopoverTrigger>
  <UiPopoverPortal>
    <UiPopoverPositioner>
      <UiPopoverPopup>
        <UiPopoverArrow />
        <UiPopoverTitle>Title</UiPopoverTitle>
        <UiPopoverDescription>Body</UiPopoverDescription>
        <UiPopoverClose>Close</UiPopoverClose>
      </UiPopoverPopup>
    </UiPopoverPositioner>
  </UiPopoverPortal>
</UiPopoverRoot>

Parts

• Root — owns open state. open / defaultOpen.
• Trigger — toggles the popup. openOnHover opens on pointer enter.
• Portal / Positioner / Popup — role="dialog" below the trigger. Esc and outside click close.
• Arrow — matches the popup surface. No drop-shadow.
• Title / Description — labelled by the popup.
• Close — sets open to false.