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.

To learn how to customize the slot, check out the Overriding component structure guide.

Slot name	Class name	Default component	Description
root	.base-Popup-root	`'div'`	The component that renders the root.

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--open	Class name applied to the root element when the popup is open.

Popup

Popup API

Import

Props

Slots

CSS classes