Coming from Orbiter, you should be aware of the following changes:
- The
positionproperty has been renamedplacement.
Popover
A popover displays additional content when a user interacts with a trigger element.
Anatomy
Composed Components
A Popover uses the following components.
Usage
Disabled
A popover will not open when its trigger is disabled.
Single button
A popover can have a single button.
Multiple buttons
A popover can have a group of buttons.
Footer text
A popover can have footer text.
Placement
A popover can be positioned in different ways top, right, bottom, left.
Context
A Popover's isOpen state or close function can be retrieved from PopoverContext and ButtonContext.
Controlled
A Popover's open state can be handled in controlled mode.
Props
Popover
- isAutoWidth?
- boundaryOffset?
- isNonDialog?
- containerProps?
- placement?
- style?
- isOpen?
- containerPadding?
- offset?
- crossOffset?
- shouldFlip?
- triggerRef?
- trigger?
- isEntering?
- isExiting?
- UNSTABLE_portalContainer?
- defaultOpen?
- onOpenChange?
- children?
- className?
Whether the popover should have an auto width. Only available in non-dialog popovers.
The minimum distance the trigger edge should be from the edge of the overlay element.
Whether the popover is a non-dialog. This is set to true in components such as selects.
The props of the popover's inner container.
The placement of the popover with respect to its anchor element.
Defaults to bottom.
The inline style for the element. A function may be provided to compute the style based on component state.
Whether the overlay is open by default (controlled).
The placement padding that should be applied between the element and its surrounding container.
Defaults to 12.
The additional offset applied along the main axis between the element and its anchor element.
Defaults to 8.
The additional offset applied along the cross axis between the element and its anchor element.
Defaults to 0.
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
Defaults to true.
The ref for the element which the popover positions itself with respect to.
When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.
The name of the component that triggered the popover. This is reflected on the element
as the data-trigger attribute, and can be used to provide specific
styles for the popover depending on which element triggered it.
Whether the popover is currently performing an entry animation.
Whether the popover is currently performing an exit animation.
The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.
Defaults to document.body.
Whether the overlay is open by default (uncontrolled).
Handler that is called when the overlay's open state changes.
The children of the component. A function may be provided to alter the children based on component state.
The CSS className for the element. A function may be provided to compute the class based on component state.
- boundaryElement?
- scrollRef?
- shouldUpdatePosition?
- arrowBoundaryOffset?
- isNonModal?
- isKeyboardDismissDisabled?
- shouldCloseOnInteractOutside?
Element that that serves as the positioning boundary.
Defaults to document.body.
A ref for the scrollable region within the overlay.
Defaults to overlayRef.
Whether the overlay should update its position automatically.
Defaults to true.
The minimum distance the arrow's edge should be from the edge of the overlay element.
Defaults to 0.
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.
Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
Whether pressing the escape key to close the popover should be disabled.
Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
Defaults to false.
When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.
- slot?
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
PopoverTrigger
- isOpen?
- defaultOpen?
- onOpenChange?
Whether the overlay is open by default (controlled).
Whether the overlay is open by default (uncontrolled).
Handler that is called when the overlay's open state changes.