Staffbase Design Systemv21.2.0

Components

Popover

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

Stable
GitHub

Anatomy

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

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

Examples

Anchor

API reference

Root

Inherits props fromBase UI Popover Root

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

Trigger

Inherits props fromBase UI Popover Trigger
NameTypeDescription
children
ReactNode
Must be a button element.

Content

Inherits props fromBase UI Popover Positioner
NameTypeDescription
children
ReactNode
The content shown inside the popover.
anchor
ElementRefObject<Element>() => Element
An external element to position the popover against. When set, the popover is anchored to this element instead of the trigger.
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 anchor. Also accepts a function receiving anchor and positioner dimensions for dynamic offsets.
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 fromBase UI Popover Close

Renders a close button with a CloseIcon that dismisses the popover when activated. Inherits all native <button> props.