silk-widgets/com.varabyte.kobweb.silk.components.overlay/Overlay

Overlay

@Composable

fun Overlay(modifier: Modifier = Modifier, variant: CssStyleVariant<OverlayKind>? = null, contentAlignment: Alignment = Alignment.TopCenter, ref: ElementRefScope<HTMLElement>? = null, content: @Composable BoxScope.() -> Unit = {})(source)

Renders a fullscreen overlay that is removed from the normal compose flow.

In other words, any children content for this overlay will be parented under the overlay as a new root, and not wherever in the compose hierarchy things happen to be.

This class is particularly suited to opening a modal dialog on top of it. For example, if you had a Dialog composable, you could do something like:

var showModal by remember { mutableStateOf(true) }
if (showModal) {
  Overlay(Modifier.onClick { showModal = false }) {
    Dialog {
       // ... your modal content here ...
    }
  }
}

Note: For users who are only using silk widgets and not kobweb, then you must call DeferringHost yourself first, as a parent method that this lives under. See the method for more details.