Defines a composable used for presenting information to a user via a popup

View in playground


fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntPxPosition = IntPxPosition(IntPx.Zero, IntPx.Zero),
    popupProperties: PopupProperties = PopupProperties(),
    children: @Composable() () -> Unit
  • alignment - the alignment of the popup composable within its container

  • offset - the offset to be applied to the popup

  • popupProperties - the additional properties to be applied to the popup

  • children - the child composables to be displayed within the popup


Creating a standard popup

At a minimum, a Popup can be created by providing a child component that we
wish to display as the composable content.

Popup {
    Stack {
            Modifier.preferredSize(200.dp, 50.dp),
            shape = RoundedCornerShape(16.dp),
            backgroundColor = Color.Black
            text = "Pop up!", modifier = Modifier.gravity(Alignment.Center),
            color = Color.White

Above we saw the mention of the PopupProperties class - this allows us to provide
some additional properties for the popup. Currently the class supports two properties via its constructor, with more planned to be added in future.

  • isFocusable - whether or not the popup should take the current focus

  • onDismissRequest - when the popup is focusable, this is executed when
    click events are made from outside the popup

data class PopupProperties(
    val isFocusable: Boolean = false,
    val onDismissRequest: (() -> Unit)? = null