Popup

The Popup component is a utility that lets you display content in tooltips and popovers.

import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup';
// or
import { Unstable_Popup as Popup } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props of the native component are also available.

Name	Type	Default	Description
anchor	HTML element \| object \| func	-	An HTML element, virtual element, or a function that returns either. It's used to set the position of the popup.
container	HTML element \| func	-	An HTML element or function that returns one. The container will have the portal children appended to it. By default, it uses the body of the top-level document object, so it's `document.body` in these cases.
disablePortal	bool	false	If `true`, the popup will be rendered where it is defined, without the use of portals.
keepMounted	bool	false	If `true`, the popup will exist in the DOM even if it's closed. Its visibility will be controlled by the `visibility` CSS property. Otherwise, a closed popup will be removed from the DOM.
middleware	Array<false \| { fn: func, name: string, options?: any }>	-	Collection of Floating UI middleware to use when positioning the popup. If not provided, the `offset` and `flip` functions will be used.
offset	func \| number \| { alignmentAxis?: number, crossAxis?: number, mainAxis?: number }	0	Distance between a popup and the trigger element. This prop is ignored when custom `middleware` is provided.
open	bool	false	If `true`, the popup is visible.
placement	'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'	'bottom'	Determines where to place the popup relative to the trigger element.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the Popup.
slots	{ root?: elementType }	{}	The components used for each slot inside the Popup. Either a string to use a HTML element or a component. See Slots API below for more details.
strategy	'absolute' \| 'fixed'	'absolute'	The type of CSS position property to use (absolute or fixed).

The ref is forwarded to the root element.

Popup

Popup API

Import

Props