---
title: "Popup"
description: "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."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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. |




<div class='sourceset sourceset-common'>Common</div>


```kotlin
@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. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@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. |




<div class='sourceset sourceset-android'>Android</div>


```kotlin
@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
```kotlin
@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
```kotlin
@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")
                }
            }
        }
    }
}
```