Popover

Copy for LLM

The Popover component provides a way to display content in a floating panel that is anchored to a trigger element.

Import

import { Popover } from "@cfa/react-core";

Live Editor

Examples

A basic example of the Popover component with a trigger and a panel.

Custom Trigger

Using a custom trigger element wrapped in a Pressable component.

Placement

You can control the position of the popover relative to its trigger using the placement prop. The default placement is bottom.

Composition

The Popover component offers two different ways to use it. The simplified Popover.Panel approach (recommended) or the more granular approach using Popover.Wrapper and Popover.Dialog.

Recommended: Popover.Panel

For most use cases, we recommend using Popover.Panel. It combines the Wrapper and Dialog components into a single, convenient component.

Alternative: Wrapper & Dialog

For advanced use cases where you need more control over the structure, you can use the Wrapper and Dialog components directly. However, this is generally not necessary and adds complexity.

Events

The Popover component provides an onOpenChange event that allows you to track and control when the popover opens or closes.

Props

Visit the Documentation Site for the full list of props.

Popover.Root

Name	Type	Default	Description
defaultOpen	`boolean`	-	Whether the overlay is open by default (uncontrolled).
isOpen	`boolean`	-	Whether the overlay is open by default (controlled).
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.

Popover.Panel

Name	Type	Default	Description
placement	`Placements`	-	The placement of the element with respect to its anchor element.
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
arrowBoundaryOffset	`number`	`0`	The minimum distance the arrow's edge should be from the edge of the overlay element.
arrowRef	`RefObject<Element>`	-	A ref for the popover arrow element.
boundaryElement	`Element`	`document.body`	Element that that serves as the positioning boundary.
className	`ClassNameOrFunction<PopoverRenderProps>`	`'react-aria-Popover'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
containerPadding	`number`	`12`	The placement padding that should be applied between the element and its surrounding container.
crossOffset	`number`	`0`	The additional offset applied along the cross axis between the element and its anchor element.
defaultOpen	`boolean`	-	Whether the overlay is open by default (uncontrolled).
dir	`string`	-	-
hidden	`boolean`	-	-
inert	`boolean`	-	-
isEntering	`boolean`	-	Whether the popover is currently performing an entry animation.
isExiting	`boolean`	-	Whether the popover is currently performing an exit animation.
isKeyboardDismissDisabled	`boolean`	`false`	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.
isNonModal	`boolean`	-	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.
isOpen	`boolean`	-	Whether the overlay is open by default (controlled).
lang	`string`	-	-
maxHeight	`number`	-	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
offset	`number`	`8`	The additional offset applied along the main axis between the element and its anchor element.
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLDivElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onClick	`MouseEventHandler<HTMLDivElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.
onPointerCancel	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onScroll	`UIEventHandler<HTMLDivElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLDivElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onWheel	`WheelEventHandler<HTMLDivElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLDivElement>`	-	-
render	`DOMRenderFunction<"div", PopoverRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
scrollRef	`RefObject<Element>`	`overlayRef`	A ref for the scrollable region within the overlay.
shouldFlip	`boolean`	`true`	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.
shouldUpdatePosition	`boolean`	`true`	Whether the overlay should update its position automatically.
slot	`string`	-	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.
style	`StyleOrFunction<PopoverRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-
trigger	`string`	-	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.
triggerRef	`RefObject<Element>`	-	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.

Popover.Wrapper

Name	Type	Default	Description
placement	`Placements`	-	The placement of the element with respect to its anchor element.
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
arrowBoundaryOffset	`number`	`0`	The minimum distance the arrow's edge should be from the edge of the overlay element.
arrowRef	`RefObject<Element>`	-	A ref for the popover arrow element.
boundaryElement	`Element`	`document.body`	Element that that serves as the positioning boundary.
className	`ClassNameOrFunction<PopoverRenderProps>`	`'react-aria-Popover'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
containerPadding	`number`	`12`	The placement padding that should be applied between the element and its surrounding container.
crossOffset	`number`	`0`	The additional offset applied along the cross axis between the element and its anchor element.
defaultOpen	`boolean`	-	Whether the overlay is open by default (uncontrolled).
dir	`string`	-	-
hidden	`boolean`	-	-
inert	`boolean`	-	-
isEntering	`boolean`	-	Whether the popover is currently performing an entry animation.
isExiting	`boolean`	-	Whether the popover is currently performing an exit animation.
isKeyboardDismissDisabled	`boolean`	`false`	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.
isNonModal	`boolean`	-	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.
isOpen	`boolean`	-	Whether the overlay is open by default (controlled).
lang	`string`	-	-
maxHeight	`number`	-	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
offset	`number`	`8`	The additional offset applied along the main axis between the element and its anchor element.
onAnimationEnd	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLDivElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLDivElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLDivElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onClick	`MouseEventHandler<HTMLDivElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLDivElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLDivElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLDivElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLDivElement>`	-	-
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.
onPointerCancel	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLDivElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLDivElement>`	-	-
onScroll	`UIEventHandler<HTMLDivElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLDivElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLDivElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLDivElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLDivElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLDivElement>`	-	-
onWheel	`WheelEventHandler<HTMLDivElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLDivElement>`	-	-
render	`DOMRenderFunction<"div", PopoverRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
scrollRef	`RefObject<Element>`	`overlayRef`	A ref for the scrollable region within the overlay.
shouldFlip	`boolean`	`true`	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.
shouldUpdatePosition	`boolean`	`true`	Whether the overlay should update its position automatically.
slot	`string`	-	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.
style	`StyleOrFunction<PopoverRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
translate	`"yes" \| "no"`	-	-
trigger	`string`	-	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.
triggerRef	`RefObject<Element>`	-	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.

Popover.Dialog

Name	Type	Default	Description
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
children	`ReactNode \| ((opts: DialogRenderProps) => ReactNode)`	-	Children of the dialog. A function may be provided to access a function to close the dialog.
className	`string`	`'react-aria-Dialog'`	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
dir	`string`	-	-
hidden	`boolean`	-	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
inert	`boolean`	-	-
lang	`string`	-	-
onAnimationEnd	`AnimationEventHandler<HTMLElement>`	-	-
onAnimationEndCapture	`AnimationEventHandler<HTMLElement>`	-	-
onAnimationIteration	`AnimationEventHandler<HTMLElement>`	-	-
onAnimationIterationCapture	`AnimationEventHandler<HTMLElement>`	-	-
onAnimationStart	`AnimationEventHandler<HTMLElement>`	-	-
onAnimationStartCapture	`AnimationEventHandler<HTMLElement>`	-	-
onAuxClick	`MouseEventHandler<HTMLElement>`	-	-
onAuxClickCapture	`MouseEventHandler<HTMLElement>`	-	-
onClick	`MouseEventHandler<HTMLElement>`	-	-
onClickCapture	`MouseEventHandler<HTMLElement>`	-	-
onContextMenu	`MouseEventHandler<HTMLElement>`	-	-
onContextMenuCapture	`MouseEventHandler<HTMLElement>`	-	-
onDoubleClick	`MouseEventHandler<HTMLElement>`	-	-
onDoubleClickCapture	`MouseEventHandler<HTMLElement>`	-	-
onGotPointerCapture	`PointerEventHandler<HTMLElement>`	-	-
onGotPointerCaptureCapture	`PointerEventHandler<HTMLElement>`	-	-
onLostPointerCapture	`PointerEventHandler<HTMLElement>`	-	-
onLostPointerCaptureCapture	`PointerEventHandler<HTMLElement>`	-	-
onMouseDown	`MouseEventHandler<HTMLElement>`	-	-
onMouseDownCapture	`MouseEventHandler<HTMLElement>`	-	-
onMouseEnter	`MouseEventHandler<HTMLElement>`	-	-
onMouseLeave	`MouseEventHandler<HTMLElement>`	-	-
onMouseMove	`MouseEventHandler<HTMLElement>`	-	-
onMouseMoveCapture	`MouseEventHandler<HTMLElement>`	-	-
onMouseOut	`MouseEventHandler<HTMLElement>`	-	-
onMouseOutCapture	`MouseEventHandler<HTMLElement>`	-	-
onMouseOver	`MouseEventHandler<HTMLElement>`	-	-
onMouseOverCapture	`MouseEventHandler<HTMLElement>`	-	-
onMouseUp	`MouseEventHandler<HTMLElement>`	-	-
onMouseUpCapture	`MouseEventHandler<HTMLElement>`	-	-
onPointerCancel	`PointerEventHandler<HTMLElement>`	-	-
onPointerCancelCapture	`PointerEventHandler<HTMLElement>`	-	-
onPointerDown	`PointerEventHandler<HTMLElement>`	-	-
onPointerDownCapture	`PointerEventHandler<HTMLElement>`	-	-
onPointerEnter	`PointerEventHandler<HTMLElement>`	-	-
onPointerLeave	`PointerEventHandler<HTMLElement>`	-	-
onPointerMove	`PointerEventHandler<HTMLElement>`	-	-
onPointerMoveCapture	`PointerEventHandler<HTMLElement>`	-	-
onPointerOut	`PointerEventHandler<HTMLElement>`	-	-
onPointerOutCapture	`PointerEventHandler<HTMLElement>`	-	-
onPointerOver	`PointerEventHandler<HTMLElement>`	-	-
onPointerOverCapture	`PointerEventHandler<HTMLElement>`	-	-
onPointerUp	`PointerEventHandler<HTMLElement>`	-	-
onPointerUpCapture	`PointerEventHandler<HTMLElement>`	-	-
onScroll	`UIEventHandler<HTMLElement>`	-	-
onScrollCapture	`UIEventHandler<HTMLElement>`	-	-
onTouchCancel	`TouchEventHandler<HTMLElement>`	-	-
onTouchCancelCapture	`TouchEventHandler<HTMLElement>`	-	-
onTouchEnd	`TouchEventHandler<HTMLElement>`	-	-
onTouchEndCapture	`TouchEventHandler<HTMLElement>`	-	-
onTouchMove	`TouchEventHandler<HTMLElement>`	-	-
onTouchMoveCapture	`TouchEventHandler<HTMLElement>`	-	-
onTouchStart	`TouchEventHandler<HTMLElement>`	-	-
onTouchStartCapture	`TouchEventHandler<HTMLElement>`	-	-
onTransitionCancel	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionCancelCapture	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionEnd	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionEndCapture	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionRun	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionRunCapture	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionStart	`TransitionEventHandler<HTMLElement>`	-	-
onTransitionStartCapture	`TransitionEventHandler<HTMLElement>`	-	-
onWheel	`WheelEventHandler<HTMLElement>`	-	-
onWheelCapture	`WheelEventHandler<HTMLElement>`	-	-
render	`DOMRenderFunction<"section", undefined>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: * You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). * Only a single root DOM element can be rendered (no fragments). * You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
role	`"dialog" \| "alertdialog"`	`'dialog'`	The accessibility role for the dialog.
slot	`string`	-	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.
style	`CSSProperties`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
translate	`"yes" \| "no"`	-	-