Dialog

Dialogs inform users about a specific task and may contain critical information, or require decisions or acknowledgement.

Dialog

Maven Central Class reference Source code

Success

Day Night
Success Dialog component Success Dialog component - dark mode

Warning

Day Night
Warning Dialog component Warning Dialog component - dark mode

Destructive

Day Night
Destructive Dialog component Destructive Dialog component - dark mode

Flare

Day Night
Flare Dialog component Flare Dialog component - dark mode

Image

Day Night
Image Dialog component Image Dialog component - dark mode

Installation

Backpack Compose is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

Example of a success dialog with three buttons


                                                
                                                import net.skyscanner.backpack.compose.dialog.BpkSuccessDialog
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                
                                                BpkSuccessDialog(
                                                  icon = BpkIcons.Lg.Tick,
                                                  title = stringResource(id = R.string.dialog_title),
                                                  text = stringResource(id = R.string.dialog_text),
                                                  confirmButton = DialogButton(stringResource(id = R.string.dialog_confirmation)) { /** onClick **/ },
                                                  secondaryButton = DialogButton(stringResource(id = R.string.dialog_skip)) { /** onClick **/ },
                                                  linkButton = DialogButton(stringResource(id = R.string.dialog_link_optional)) { /** onClick **/ },
                                                ) {
                                                  // onDismiss
                                                }

Example of a warning dialog with two buttons


                                                
                                                import net.skyscanner.backpack.compose.dialog.BpkWarningDialog
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                
                                                BpkWarningDialog(
                                                  icon = BpkIcons.Lg.AlertAdd,
                                                  title = stringResource(id = R.string.dialog_title),
                                                  text = stringResource(id = R.string.dialog_text),
                                                  confirmButton = DialogButton(stringResource(id = R.string.dialog_confirmation)) { /** onClick **/ },
                                                  secondaryButton = DialogButton(stringResource(id = R.string.dialog_skip)) { /** onClick **/ },
                                                ) {
                                                  // onDismiss
                                                }

Example of a destructive dialog with two buttons


                                                
                                                import net.skyscanner.backpack.compose.dialog.BpkDestructiveDialog
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                
                                                BpkDestructiveDialog(
                                                      icon = BpkIcons.Lg.Trash,
                                                      title = stringResource(id = R.string.dialog_title),
                                                      text = stringResource(id = R.string.dialog_text),
                                                      confirmButton = DialogButton(stringResource(id = R.string.dialog_delete)) { /** onClick **/ },
                                                      linkButton = DialogButton(stringResource(id = R.string.dialog_cancel)) { /** onClick **/ },
                                                      onDismissRequest = onDismiss,
                                                ) {
                                                  // onDismiss
                                                }

Example of a flare dialog


                                                
                                                import androidx.compose.foundation.Image
                                                import net.skyscanner.backpack.compose.dialog.BpkFlareDialog
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                
                                                BpkFlareDialog(
                                                  title = stringResource(id = R.string.dialog_title),
                                                  text = stringResource(id = R.string.dialog_text),
                                                  confirmButton = DialogButton(stringResource(id = R.string.dialog_confirmation)) { /** onClick **/ },
                                                  secondaryButton = DialogButton(stringResource(id = R.string.dialog_skip)) { /** onClick **/ },
                                                  onDismissRequest = { /** onDismiss **/ },
                                                ) {
                                                  Image(
                                                    painter = painterResource(R.drawable.flare_image),
                                                    contentDescription = stringResource(R.string.flare_image_content_description),
                                                    contentScale = ContentScale.Crop,
                                                  )
                                                }

Example of an image dialog


                                                
                                                import androidx.compose.foundation.Image
                                                import net.skyscanner.backpack.compose.dialog.BpkImageDialog
                                                import net.skyscanner.backpack.compose.icons.BpkIcons
                                                import androidx.compose.ui.text.style.TextAlign
                                                
                                                BpkImageDialog(
                                                  title = stringResource(id = R.string.dialog_title),
                                                  text = stringResource(id = R.string.dialog_text),
                                                  confirmButton = DialogButton(stringResource(id = R.string.dialog_confirmation), onDismiss),
                                                  secondaryButton = DialogButton(stringResource(id = R.string.dialog_skip), onDismiss),
                                                  onDismissRequest = onDismiss,
                                                  textAlign = TextAlign.Start
                                                ) {
                                                  Image(
                                                    painter = painterResource(R.drawable.canadian_rockies_canada),
                                                    contentDescription = stringResource(R.string.image_rockies_content_description),
                                                    contentScale = ContentScale.Crop,
                                                  )
                                                }