Popover

A Popover component is used to display a popup window that appears on top of the app's content.

<Popover
popoverWrapper={<AvatarLockup name="First Last" pronouns="he/him" />}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
slotProps={{
paper: {
sx: { width: '308px', height: '255px' },
},
}}
popoverComponent={
<>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Avatar />
<AvatarLockup name="First Last" pronouns="he/him" />
</Box>
<Typography sx={{ padding: ' 16px 0px' }}>
Lorem ipsum dolor sit amet consectetur. In at faucibus urna ac. Etiam
vulputate luctus neque id at.
</Typography>
<Button sx={{ width: '100%', marginBottom: '8px' }}>Button</Button>
<Button variant="text" sx={{ width: '100%' }}>
Button
</Button>
</>
}
/>

Props

PropTypeDefaultDescription
openboolfalseIf true, the component is shown.
actionref-A ref for imperative actions. It currently only supports updatePosition() action.
anchorElHTMLElement | func-An HTML element, PopoverVirtualElement, or a function that returns either. It's used to set the position of the popover.
anchorOrigin{ horizontal: 'center'| 'left'| 'right'| number, vertical: 'bottom'| 'center'| 'top'| number }{ vertical: 'top', horizontal: 'left', }This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'. Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
anchorPosition{ left: number, top: number }-This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area.
anchorReference'anchorEl'| 'anchorPosition'|'none''anchorEl'This determines which anchor prop to refer to when setting the position of the popover.
childrennode-The content of the component.
classesobject-Override or extend the styles applied to the component.
containerHTMLElement | func-An HTML element, component instance, or function that returns either. The container will passed to the Modal component. By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time.
disableScrollLockboolfalseDisable the scroll lock behavior.
elevationinteger8The elevation of the popover.
marginThresholdnumber16Specifies how close to the edge of the window the popover can appear. If null, the popover will not be constrained by the window.
onClosefunc-Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose.
slotProps{ paper?: func| object, root?: func | object }-The props used for each slot inside.
slots{ paper?: elementType, root?: elementType }-The components used for each slot inside.
sxArray<func| object| bool>| func| object-The system prop that allows defining system overrides as well as additional CSS styles.
transformOrigin{ horizontal: 'center'| 'left'| 'right'| number, vertical: 'bottom'| 'center'| 'top'| number }{ vertical: 'top', horizontal: 'left', }This is the point on the popover which will attach to the anchor's origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)].
TransitionComponentelementTypeGrowThe component used for the transition.
TransitionPropsobject-Props applied to the transition element. By default, the element is based on this Transition component.
transitionDuration'auto'| number | { appear?: number, enter?: number, exit?: number }autoSet to 'auto' to automatically calculate transition time based on height.
popoverWrapperReact.ReactElement-The custom React element used to wrap the popover. Allows for additional control or styling.
popoverComponentReact.ReactElement-The React component used to render the popover. Enables flexibility for different popover content.
classNamestring-The CSS class name to apply custom styles to the popover.
<Popover
popoverWrapper={<Avatar />}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
slotProps={{
paper: {
sx: { width: '308px', height: '151px' },
},
}}
popoverComponent={
<>
<Typography sx={{ paddingBottom: '16px' }}>
Lorem ipsum dolor sit amet consectetur. In at faucibus urna ac. Etiam
vulputate luctus neque id at.
</Typography>
<Button sx={{ width: '100%' }}>Button</Button>
</>
}
/>