Popup

Composable Function
Common
@Composable
expect fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit,
)

Opens a popup with the given content.

A popup is a floating container that appears on top of the current activity. It is especially useful for non-modal UI surfaces that remain hidden until they are needed, for example floating menus like Cut/Copy/Paste.

The popup is positioned relative to its parent, using the alignment and offset. The popup is visible as long as it is part of the composition hierarchy.

Parameters
alignment The alignment relative to the parent.
offset An offset from the original aligned position of the popup. Offset respects the Ltr/Rtl context, thus in Ltr it will be added to the original aligned position and in Rtl it will be subtracted from it.
onDismissRequest Executes when the user clicks outside of the popup.
properties PopupProperties for further customization of this popup's behavior.
content The content to be displayed inside the popup.
Common
@Composable
expect fun Popup(
    popupPositionProvider: PopupPositionProvider,
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit,
)

Opens a popup with the given content.

The popup is positioned using a custom popupPositionProvider.

Parameters
popupPositionProvider Provides the screen position of the popup.
onDismissRequest Executes when the user clicks outside of the popup.
properties PopupProperties for further customization of this popup's behavior.
content The content to be displayed inside the popup.
Android
@Composable
actual fun Popup(
    alignment: Alignment,
    offset: IntOffset,
    onDismissRequest: (() -> Unit)?,
    properties: PopupProperties,
    content: @Composable () -> Unit,
)

Opens a popup with the given content.

A popup is a floating container that appears on top of the current activity. It is especially useful for non-modal UI surfaces that remain hidden until they are needed, for example floating menus like Cut/Copy/Paste.

The popup is positioned relative to its parent, using the alignment and offset. The popup is visible as long as it is part of the composition hierarchy.

Parameters
alignment The alignment relative to the parent.
offset An offset from the original aligned position of the popup. Offset respects the Ltr/Rtl context, thus in Ltr it will be added to the original aligned position and in Rtl it will be subtracted from it.
onDismissRequest Executes when the user clicks outside of the popup.
properties PopupProperties for further customization of this popup's behavior.
content The content to be displayed inside the popup.
Android
@Composable
actual fun Popup(
    popupPositionProvider: PopupPositionProvider,
    onDismissRequest: (() -> Unit)?,
    properties: PopupProperties,
    content: @Composable () -> Unit,
)

Opens a popup with the given content.

The popup is positioned using a custom popupPositionProvider.

Parameters
popupPositionProvider Provides the screen position of the popup.
onDismissRequest Executes when the user clicks outside of the popup.
properties PopupProperties for further customization of this popup's behavior.
content The content to be displayed inside the popup.

Code Examples

PopupSample

@Composable
fun PopupSample() {
    Box {
        val popupWidth = 200.dp
        val popupHeight = 50.dp
        val cornerSize = 16.dp
        Popup(alignment = Alignment.Center) {
            // Draw a rectangle shape with rounded corners inside the popup
            Box(
                Modifier.size(popupWidth, popupHeight)
                    .background(Color.White, RoundedCornerShape(cornerSize))
            )
        }
    }
}

PopupWithPositionProviderSample

@Composable
fun PopupWithPositionProviderSample() {
    val dropdownPopupPositioner = remember {
        object : PopupPositionProvider {
            override fun calculatePosition(
                anchorBounds: IntRect,
                windowSize: IntSize,
                layoutDirection: LayoutDirection,
                popupContentSize: IntSize,
            ): IntOffset {
                // Position the popup below the anchor aligned horizontally with the anchor's
                // center.
                return IntOffset(
                    x = anchorBounds.left + anchorBounds.width / 2,
                    y = anchorBounds.top + anchorBounds.height * 2,
                )
            }
        }
    }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Box(modifier = Modifier.background(Color.LightGray).padding(10.dp)) {
            BasicText(text = "Anchor")
            Popup(popupPositionProvider = dropdownPopupPositioner) {
                Box(
                    modifier =
                        Modifier.background(Color.Green, RoundedCornerShape(16.dp)).padding(10.dp),
                    contentAlignment = Alignment.Center,
                ) {
                    BasicText(text = "Popup")
                }
            }
        }
    }
}