Skip to content
Edit this page
+

Popup

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

DemosComponents API
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.

An HTML element, virtual element, or a function that returns either. It's used to set the position of the popup.

Type:

HTML element | object | 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.

Type:

HTML element | func

If true, the popup will be rendered where it is defined, without the use of portals.

Type:

bool

Default:

false

If true, the popup will exist in the DOM even if it's closed. Its visibility will be controlled by the display CSS property.
Otherwise, a closed popup will be removed from the DOM.

Type:

bool

Default:

false

Collection of Floating UI middleware to use when positioning the popup. If not provided, the offset and flip functions will be used.

Type:

Array<false | { fn: func, name: string, options?: any }>

Distance between a popup and the trigger element. This prop is ignored when custom middleware is provided.

Type:

func | number | { alignmentAxis?: number, crossAxis?: number, mainAxis?: number }

Default:

0

If true, the popup is visible.

Type:

bool

Default:

false

Determines where to place the popup relative to the trigger element.

Type:

'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'

Default:

'bottom'

The props used for each slot inside the Popup.

Type:

{ root?: func | object }

Default:

{}

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.

Type:

{ root?: elementType }

Default:

{}

The type of CSS position property to use (absolute or fixed).

Type:

'absolute' | 'fixed'

Default:

'absolute'

If true, the popup will not disappear immediately when it needs to be closed but wait until the exit transition has finished. In such a case, a function form of children must be used and onExited callback function must be called when the transition or animation finish.

Type:

bool

Default:

false

The ref is forwarded to the root element.

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

The component that renders the root.

Default: 'div'

Global class: .MuiPopup-root


You can override the style of the component using one of these customization options:

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

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