A floating panel anchored to a trigger with automatic positioning.
import { DialogTrigger, Popover, Button, Text } from '@backstage/ui';
<DialogTrigger>
<Button>Open Popover</Button>
<Popover>
<Text>Popover content</Text>
</Popover>
</DialogTrigger>Wraps the trigger button and popover content.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | - | Whether the popover is open by default (uncontrolled). |
| isOpen | boolean | - | Whether the popover is open (controlled). |
| onOpenChange | (isOpen: boolean) => void | - | Handler called when the popover open state changes. |
| children | ReactNode | - |
Inherits all React Aria DialogTrigger props.
Displays floating content with automatic positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
| placement | toprightbottomleft | - | The placement of the popover relative to the trigger element. |
| offset | number | 8 | The distance in pixels between the popover and the trigger element. |
| containerPadding | number | 12 | The minimum distance in pixels from the edge of the viewport. |
| hideArrow | boolean | false | Whether to hide the arrow pointing to the trigger element. |
| children | ReactNode | - | |
| className | string | - | Additional CSS class name for custom styling. |
Inherits all React Aria Popover props.
Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.
bui-Popoverbui-PopoverArrowbui-PopoverContent