Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Dialog renders a modal overlay with three optional slots — header, body, and footer. The header slot automatically includes a close (×) button in the top-right corner. All slots are optional so you can compose only what you need.

Basic Usage

A confirmation dialog uses only header and footer. DialogTitle and DialogDescription provide the correct typography inside the header slot; DialogAction and DialogCancel render the primary and outline buttons in the footer.

With Body Content

Use the body slot to place form fields, lists, or any freeform content between the header and footer.

Header Only

When no user action is needed you can omit footer entirely. The close button in the header corner still dismisses the dialog.

import com.komoui.components.Dialog
import com.komoui.components.DialogDescription
import com.komoui.components.DialogTitle
 
@Composable
fun Example() {
    var showDialog by remember { mutableStateOf(false) }
 
    Dialog(
        open = showDialog,
        onDismissRequest = { showDialog = false },
        header = {
            DialogTitle { Text("Information") }
            DialogDescription { Text("This action has been completed successfully.") }
        }
    )
}

API Reference

Dialog

Parameter	Type	Default	Description
`open`	`Boolean`	—	Controls whether the dialog is visible.
`onDismissRequest`	`() -> Unit`	—	Called when the user taps outside the dialog or the close button.
`modifier`	`Modifier`	`Modifier`	Applied to the dialog's content container.
`header`	`(@Composable ColumnScope.() -> Unit)?`	`null`	Header slot. Rendered alongside an auto-inserted close button. Typically contains `DialogTitle` and `DialogDescription`.
`body`	`(@Composable ColumnScope.() -> Unit)?`	`null`	Body slot. Placed between header and footer. Use for forms, lists, or freeform content.
`footer`	`(@Composable RowScope.() -> Unit)?`	`null`	Footer slot. Rendered in a right-aligned `Row`. Typically contains `DialogCancel` and `DialogAction`.

DialogTitle

Applies foreground color, 18 sp, and SemiBold weight to its content via ProvideTextStyle.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	Applied to the title container.
`content`	`@Composable () -> Unit`	—	Slot content — typically a `Text`.

DialogDescription

Applies mutedForeground color and 14 sp to its content via ProvideTextStyle.

Parameter	Type	Default	Description
`modifier`	`Modifier`	`Modifier`	Applied to the description container.
`content`	`@Composable () -> Unit`	—	Slot content — typically a `Text`.

DialogAction

A primary action button using ButtonVariant.Default. Place inside the footer slot.

Parameter	Type	Default	Description
`onClick`	`() -> Unit`	—	Called when the button is tapped.
`modifier`	`Modifier`	`Modifier`	Applied to the button.
`content`	`@Composable () -> Unit`	—	Button label — typically a `Text`.

DialogCancel

A secondary cancel button using ButtonVariant.Outline. Place inside the footer slot.

Parameter	Type	Default	Description
`onClick`	`() -> Unit`	—	Called when the button is tapped.
`modifier`	`Modifier`	`Modifier`	Applied to the button.
`content`	`@Composable () -> Unit`	—	Button label — typically a `Text`.

Edit this page on GitHub