Modals are used to display content or views that are separate from the rest of the app or page.


Maven Central Class reference Source code


Day Night Right to Left
DefaultModal DefaultModal - dark mode DefaultModal - rtl mode
Day Night Right to Left
ModalWithoutAction ModalWithoutAction - dark mode ModalWithoutAction - rtl mode
Day Night Right to Left
ModalWithoutActionAndTitle ModalWithoutActionAndTitle - dark mode ModalWithoutActionAndTitle - rtl mode
Day Night Right to Left
ModalWithBackIcon ModalWithBackIcon - dark mode ModalWithBackIcon - rtl mode


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


Example of a Modal:

                                                import androidx.compose.runtime.rememberCoroutineScope
                                                import androidx.compose.runtime.saveable.rememberSaveable
                                                import net.skyscanner.backpack.compose.modal.BpkModal
                                                import net.skyscanner.backpack.compose.modal.rememberBpkModalState
                                                val showModal = rememberSaveable { mutableStateOf(true) }
                                                if (showModal.value) {
                                                    val modalState = rememberBpkModalState()
                                                    val coroutineScope = rememberCoroutineScope()
                                                        state = modalState,
                                                        title = title,
                                                        navIcon = NavIcon.Close(
                                                            contentDescription = "Navigate back",
                                                            onClick = { coroutineScope.launch { modalState.hide() } },
                                                        action = TextAction(
                                                            text = "Action",
                                                            onClick = {
                                                                coroutineScope.launch { modalState.hide() }
                                                        onDismiss = { showModal.value = false },
                                                    ) {
                                                        // modal content

Note: to correctly show/hide the modal with animation use rememberBpkModalState and modalState.hide() as shown in the example above. The onDismiss callback will be called when the modal is fully dismissed.