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-PopoverContentBreaking Simplified the neutral background prop API for container components. The explicit neutral-1, neutral-2, neutral-3, and neutral-auto values have been removed from ProviderBg. They are replaced by a single 'neutral' value that always auto-increments from the parent context, making it impossible to skip or pin to an explicit neutral level. #33002
Migration Guide:
Replace any explicit bg="neutral-1", bg="neutral-2", bg="neutral-3", or bg="neutral-auto" props with bg="neutral". To achieve a specific neutral level in stories or tests, use nested containers — each additional bg="neutral" wrapper increments by one level.
// Before
<Box bg="neutral-2">...</Box>
// After
<Box bg="neutral">
<Box bg="neutral">...</Box>
</Box>
Breaking Removed --bui-bg-popover CSS token. Popover, Tooltip, Menu, and Dialog now use --bui-bg-app for their outer shell and Box bg="neutral-1" for content areas, providing better theme consistency and eliminating a redundant token. #32979
Migration Guide:
Replace any usage of --bui-bg-popover with --bui-bg-neutral-1 (for content surfaces) or --bui-bg-app (for outer shells):
- background: var(--bui-bg-popover);
+ background: var(--bui-bg-neutral-1);
useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050