---
title: Alert Dialog
description: Modal dialogs for confirmations, destructive actions, and focused decisions.
---

Use alert dialogs when you need to pause the current flow and ask for a clear choice.

<UiDemo id="alert-dialog" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/AlertDialog.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Three actions

<UiDemo id="alert-dialog-3-actions" />

### With an icon

<UiDemo id="alert-dialog-icon" />

## API Reference

### AlertDialog (1)

A modal dialog for confirmations and focused decisions.

```kotlin
@Composable
fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    title: (@Composable () -> Unit)? = null,
    text: @Composable () -> Unit,
    positiveButton: @Composable () -> Unit,
    neutralButton: (@Composable () -> Unit)? = null,
    negativeButton: (@Composable () -> Unit)? = null,
    shape: Shape = Theme[shapes][dialogShape],
    backgroundColor: Color = Theme[colors][panelColor],
    contentColor: Color = Theme[colors][onPanelColor],
    supportingTextColor: Color = Theme[colors][mutedColor],
    shadow: Shadow = Theme[shadows][overlayShadow],
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `visible` | `Boolean` | Whether the dialog is currently shown. |
| `onDismissRequest` | `() -> Unit` | Called when the dialog should close. |
| `modifier` | `Modifier` | Modifier applied to the dialog container. |
| `icon` | `(@Composable () -> Unit)?` | Optional icon content shown above the title. |
| `title` | `(@Composable () -> Unit)?` | Optional title content shown at the top of the dialog. |
| `text` | `@Composable () -> Unit` | Main supporting content shown inside the dialog. |
| `positiveButton` | `@Composable () -> Unit` | Primary action button content. |
| `neutralButton` | `(@Composable () -> Unit)?` | Optional neutral action button content. |
| `negativeButton` | `(@Composable () -> Unit)?` | Optional secondary or destructive action button content. |
| `shape` | `Shape` | Shape used for the dialog container. |
| `backgroundColor` | `Color` | Background color used for the dialog surface. |
| `contentColor` | `Color` | Color used for main dialog content. |
| `supportingTextColor` | `Color` | Color used for supporting text content. |
| `shadow` | `Shadow` | Shadow applied to the dialog container. |

### AlertDialog (2)

Variant of [AlertDialog] that can take any content.

```kotlin
@Composable
fun AlertDialog(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    paneTitle: String = "Alert dialog",
    shape: Shape = Theme[shapes][dialogShape],
    backgroundColor: Color = Theme[colors][panelColor],
    contentColor: Color = Theme[colors][onPanelColor],
    contentPadding: PaddingValues = PaddingValues(24.dp),
    shadow: Shadow = Theme[shadows][overlayShadow],
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `visible` | `Boolean` | Whether the dialog is currently shown. |
| `onDismissRequest` | `() -> Unit` | Called when the dialog should close. |
| `modifier` | `Modifier` | Modifier applied to the dialog container. |
| `paneTitle` | `String` | Accessible title announced for the dialog panel. |
| `shape` | `Shape` | Shape used for the dialog container. |
| `backgroundColor` | `Color` | Background color used for the dialog surface. |
| `contentColor` | `Color` | Color used for the dialog content. |
| `contentPadding` | `PaddingValues` | Padding applied inside the dialog container. |
| `shadow` | `Shadow` | Shadow applied to the dialog container. |
| `content` | `@Composable () -> Unit` | Composable content displayed inside the dialog. |