Skip to main content
AlertDialog is a modal component that displays important information and prompts users for decisions. It interrupts the user flow to capture attention and requires explicit action.

​
Usage

import com.nomanr.lumo.ui.components.AlertDialog
import com.nomanr.lumo.ui.components.BasicAlertDialog

AlertDialog(
    onDismissRequest = { /* Handle dismiss */ },
    onConfirmClick = { /* Handle confirm */ },
    title = "Confirm Action",
    text = "Are you sure you want to proceed?",
    confirmButtonText = "OK",
    dismissButtonText = "Cancel"
)

​
Variants

​
Standard Alert Dialog

The default dialog with title, message, and action buttons: 
AlertDialog(
    onDismissRequest = { showDialog = false },
    onConfirmClick = { 
        // Handle confirmation
        showDialog = false 
    },
    title = "Delete Item",
    text = "This action cannot be undone. Are you sure?",
    confirmButtonText = "Delete",
    dismissButtonText = "Cancel"
)

​
Single Button Dialog

Remove the dismiss button by setting dismissButtonText to null: 
AlertDialog(
    onDismissRequest = { showDialog = false },
    onConfirmClick = { showDialog = false },
    title = "Information",
    text = "Your changes have been saved successfully",
    confirmButtonText = "Got it",
    dismissButtonText = null // No cancel button
)

​
Dialog with Icon

Add a custom icon to draw attention: 
AlertDialog(
    onDismissRequest = { showDialog = false },
    onConfirmClick = { showDialog = false },
    title = "Warning",
    text = "This action requires your attention",
    icon = {
        Icon(
            imageVector = Icons.Default.Warning,
            contentDescription = "Warning"
        )
    }
)

​
Custom Content Dialog

Use BasicAlertDialog with custom content for complete control: 
BasicAlertDialog(
    onDismissRequest = { showDialog = false }
) {
    Surface(
        shape = RoundedCornerShape(16.dp),
        color = AppTheme.colors.surface
    ) {
        Column(
            modifier = Modifier.padding(24.dp)
        ) {
            Text("Custom Content", style = AppTheme.typography.h3)
            // Add your custom content
        }
    }
}

​
Parameters

​
AlertDialog

​
onDismissRequest
() -> Unit
required
Callback when the dialog is dismissed by clicking outside or pressing back
​
onConfirmClick
() -> Unit
required
Callback when the confirm button is clicked
​
title
String
required
The title text displayed at the top of the dialog
​
text
String
required
The body text that explains the dialog message
​
confirmButtonText
String
default:"OK"
Text for the confirm/action button
​
dismissButtonText
String?
default:"Cancel"
Text for the dismiss/cancel button. Set to null to hide the button
​
icon
@Composable (() -> Unit)?
default:"null"
Optional icon displayed above the title
​
shape
Shape
default:"RoundedCornerShape(16.dp)"
The shape of the dialog container
​
containerColor
Color
default:"AppTheme.colors.surface"
Background color of the dialog
​
iconContentColor
Color
default:"AppTheme.colors.primary"
Color for the icon content
​
titleContentColor
Color
default:"AppTheme.colors.primary"
Color for the title text
​
textContentColor
Color
default:"AppTheme.colors.primary"
Color for the body text
​
elevation
Dp
default:"4.dp"
Shadow elevation of the dialog
​
properties
DialogProperties
default:"DialogProperties()"
Platform-specific properties for the dialog window
​
content
@Composable (() -> Unit)?
default:"null"
Custom content to replace the default dialog layout

​
BasicAlertDialog

​
onDismissRequest
() -> Unit
required
Callback when the dialog is dismissed
​
modifier
Modifier
default:"Modifier"
Modifier for the dialog container
​
properties
DialogProperties
default:"DialogProperties()"
Platform-specific properties for the dialog window
​
content
@Composable () -> Unit
required
The content to display in the dialog

​
Styling

​
Custom Colors

AlertDialog(
    onDismissRequest = { },
    onConfirmClick = { },
    title = "Custom Styled Dialog",
    text = "This dialog has custom colors",
    containerColor = Color.White,
    titleContentColor = Color.Black,
    textContentColor = Color.DarkGray
)

​
Custom Shape

AlertDialog(
    onDismissRequest = { },
    onConfirmClick = { },
    title = "Rounded Dialog",
    text = "With custom corner radius",
    shape = RoundedCornerShape(24.dp)
)

​
Defaults

The dialog has the following default values:
  • Min Width: 280.dp
  • Max Width: 560.dp
  • Dialog Padding: 24.dp (all sides)
  • Icon Padding: 16.dp (bottom)
  • Title Padding: 16.dp (bottom)
  • Text Padding: 24.dp (bottom)
  • Buttons Spacing: 8.dp (main axis), 12.dp (cross axis)
  • Shape: RoundedCornerShape(16.dp)
  • Elevation: 4.dp

​
Best Practices

  1. Keep it Simple: Use clear, concise titles and descriptions
  2. Action Buttons: Confirm button should be on the right, cancel on the left
  3. Critical Actions: For destructive actions, consider using a single confirm button
  4. Icon Usage: Use icons sparingly and only when they add clarity
  5. Avoid Overuse: Dialogs interrupt the user flow - use them judiciously

​
Source Reference

See the full implementation in AlertDialog.kt:48-91 and BasicAlertDialog.kt:94-115.

Build docs developers (and LLMs) love

Get started for freeTalk to us