Notifications
You are all caught up. Good job!
);
}
function ArrowSvg(props: React.ComponentProps<'svg'>) {
return (
);
}
function BellIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
### Animating the Popover
You can animate a popover as it moves between different trigger elements.
This includes animating its position, size, and content.
#### Position and Size
To animate the popover's position, apply CSS transitions to the `left`, `right`, `top`, and `bottom` properties of the **Positioner** part.
To animate its size, transition the `width` and `height` of the **Popup** part.
#### Content
The popover also supports content transitions.
This is useful when different triggers display different content within the same popover.
To enable content animations, wrap the content in the `` part.
This part provides features to create direction-aware animations.
It renders a `div` with a `data-activation-direction` attribute (`left`, `right`, `up`, or `down`) that indicates the new trigger's position relative to the previous one.
Inside the ``, the content is further wrapped in `div`s with data attributes to help with styling:
- `data-current`: The currently visible content when no transitions are present or the incoming content.
- `data-previous`: The outgoing content during a transition.
You can use these attributes to style the enter and exit animations.
## Demo
### Tailwind
This example shows how to implement the component using Tailwind CSS.
```tsx
/* index.tsx */
'use client';
import * as React from 'react';
import { Popover } from '@base-ui/react/popover';
import { Avatar } from '@base-ui/react/avatar';
import { ArrowSvg, BellIcon, ListIcon, UserIcon } from './icons-tw';
const demoPopover = Popover.createHandle();
export default function PopoverDetachedTriggersFullDemo() {
return (
);
}
function ActivityPanel() {
return (
Activity
Nothing interesting happened recently.
);
}
function ArrowSvg(props: React.ComponentProps<'svg'>) {
return (
);
}
function BellIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
function UserIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
function ListIcon(props: React.ComponentProps<'svg'>) {
return (
);
}
```
## API reference
### Root
Groups all parts of the popover.
Doesn’t render its own HTML element.
**Root Props:**
| Prop | Type | Default | Description |
| :------------------------------------------------------ | :------------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| defaultOpen | `boolean` | `false` | Whether the popover is initially open.To render a controlled popover, use the `open` prop instead. |
| open | `boolean` | - | Whether the popover is currently open. |
| onOpenChange | `((open: boolean, eventDetails: Popover.Root.ChangeEventDetails) => void)` | - | Event handler called when the popover is opened or closed. |
| actionsRef | `RefObject` | - | A ref to imperative actions.\* `unmount`: When specified, the popover will not be unmounted when closed.
Instead, the `unmount` function must be called to unmount the popover manually.
Useful when the popover's animation is controlled by an external library. |
| \* `close`: Closes the dialog imperatively when called. |
| defaultTriggerId | `string \| null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `defaultOpen` prop to create an initially open popover. |
| handle | `Popover.Handle` | - | A handle to associate the popover with a trigger.
If specified, allows external triggers to control the popover's open state. |
| modal | `boolean \| 'trap-focus'` | `false` | Determines if the popover enters a modal state when open.\* `true`: user interaction is limited to the popover: document page scroll is locked, and pointer interactions on outside elements are disabled. |
- `false`: user interaction with the rest of the document is allowed.
- `'trap-focus'`: focus is trapped inside the popover, but document page scroll is not locked and pointer interactions outside of it remain enabled. |
| onOpenChangeComplete | `((open: boolean) => void)` | - | Event handler called after any animations complete when the popover is opened or closed. |
| triggerId | `string \| null` | - | ID of the trigger that the popover is associated with.
This is useful in conjunction with the `open` prop to create a controlled popover.
There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set). |
| children | `ReactNode \| PayloadChildRenderFunction` | - | The content of the popover.
This can be a regular React node or a render function that receives the `payload` of the active trigger. |
### Trigger
A button that opens the popover.
Renders a `