Staffbase

Components

Popover

Popovers display floating content anchored to a trigger element. Use them for non-modal contextual information or actions.

Stable
GitHub Figma

Anatomy

Anatomy 
import {Popover} from '@staffbase/design';

<Popover.Root>
  <Popover.Trigger />
  <Popover.Content>
    <Popover.Close />
  </Popover.Content>
</Popover.Root>;

API reference

Root

Inherits props fromRadix UI Popover Root

Groups all parts of the popover and manages its open state.

Trigger

Inherits props fromRadix UI Popover Trigger
Name Type Description
children
ReactNode
The element that toggles the popover when activated. Passed as a single element, not via a render prop.

Content

Inherits props fromRadix UI Popover Content

Renders the floating surface, portalled out of the DOM flow.

Name Type Description
children
ReactNode
The content shown inside the popover.
side
toprightbottomleft
Which side of the trigger (or anchor) to position the popover against.
Default: bottom
align
startcenterend
The alignment of the popover against the trigger (or anchor).
Default: center
sideOffset
number
The distance in pixels between the popover and its trigger (or anchor).
Default: 4
container
HTMLElementRefObject<HTMLElement>
The element the popover portal renders into. Use this instead of z-index to control stacking. Defaults to the document body.

Close

Inherits props fromRadix UI Popover Close

Renders a close button that dismisses the popover when activated.

Name Type Description
title
string
An accessible label for the close button, surfaced to assistive technology and as a tooltip.

Anchor

Inherits props fromRadix UI Popover Anchor

An optional element to position the popover against. When used, the popover is anchored to this element instead of the trigger.