Design/net.ikea.skapa.ui.components/Prompt

Prompt

@Composable
fun Prompt(header: String, primaryAction: PromptAction, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, dialogProperties: DialogProperties = DialogProperties(), content: @Composable () -> Unit)

Prompt is a modal window that appears in the centre of a screen, disabling the content below. It interrupts the user with a critical task, decision, or acknowledgement that needs to be addressed before continuing. It's built on top of androidx.compose.ui.window.Dialog and comes with a predefined appearance based on Skapa design and guidelines (https://skapa.ikea.net/).

Prompts should be short and direct and not require complex decision-making. Heading and actions should pair clearly when scanning the content. Prompts are either relevant to the users' current task or communicate important information that could affect their experience.

Parameters

header

string that contains the header text for the Prompt.

primaryAction

callback to be invoked when the primary action button is being clicked.

onDismissRequest

action to be taken when dismissing the prompt.

modifier

modifier to be applied to the Prompt.

dialogProperties

properties used to customize the behavior of a Dialog.

content

composable surface to contain any content the user wishes to display.

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Prompt
import net.ikea.skapa.ui.components.PromptAction

fun main() { 
   //sampleStart 
   // define a state to show/dismiss prompt
var showPrompt by remember { mutableStateOf(true) }
if (showPrompt) {
    SkapaThemeM3(darkTheme = isSystemInDarkTheme()) {
        Prompt(
            header = "Prompt Header",
            primaryAction = PromptAction("Primary", action = { /* Do something */ }),
            // Prompt and have a secondary action
            // secondaryAction = PromptAction("Secondary", action = { /* Do something */ }),
            content = { Text(text = "Prompt body") },
            onDismissRequest = { showPrompt = false }
        )
    }
} 
   //sampleEnd
}
@Composable
fun Prompt(header: String, primaryAction: PromptAction, secondaryAction: PromptAction, onDismissRequest: () -> Unit, modifier: Modifier = Modifier, buttonAlignment: FooterButtonAlignment = FooterButtonAlignment.SideBySide, dialogProperties: DialogProperties = DialogProperties(), content: @Composable () -> Unit)

Prompt is a modal window that appears in the centre of a screen, disabling the content below. It interrupts the user with a critical task, decision, or acknowledgement that needs to be addressed before continuing. It's built on top of androidx.compose.ui.window.Dialog and comes with a predefined appearance based on Skapa design and guidelines (https://skapa.ikea.net/).

Prompts should be short and direct and not require complex decision-making. Heading and actions should pair clearly when scanning the content. Prompts are either relevant to the users' current task or communicate important information that could affect their experience.

Parameters

header

string that contains the header text for the Prompt.

primaryAction

callback to be invoked when the primary action button is being clicked.

secondaryAction

callback to be invoked when the secondary action button is being clicked. Nullable. If secondaryAction is null, Prompt will rely solely on primaryAction for input.

onDismissRequest

action to be taken when dismissing the prompt.

modifier

modifier to be applied to the Prompt.

buttonAlignment

enum to control if footer buttons are vertically stacked or placed in a row.

dialogProperties

properties used to customize the behavior of a Dialog.

content

composable surface to contain any content the user wishes to display.

See also

Samples

import androidx.compose.foundation.layout.*
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.window.Dialog
import androidx.compose.ui.window.DialogProperties
import net.ikea.skapa.foundation.*

fun main() { 
   //sampleStart 
   val showPrompt = remember { mutableStateOf(true) }
Prompt(
    header = "Prompt Header",
    primaryAction = PromptAction("Primary", action = { }),
    secondaryAction = PromptAction("Secondary", action = { }),
    content = { Text(text = "Prompt body") },
    onDismissRequest = { showPrompt.value = false }
) 
   //sampleEnd
}