Dialog

Dialogs interrupt the user in order to bring an important piece of information to their attention. Use them with care.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.composables.uikit.components.Dialog
import com.composables.uikit.components.OutlinedButton
import com.composables.uikit.components.PrimaryButton
import com.composables.uikit.components.TextField
import com.composables.uikit.styling.title
import com.composables.uikit.components.Text
import com.composeunstyled.theme.Theme
import com.composables.uikit.styling.textStyles

@Composable
fun DialogExample() {
    var visible by remember { mutableStateOf(true) }

    Dialog(visible = visible) {
        var username by remember { mutableStateOf("") }
        var password by remember { mutableStateOf("") }
        Text("Welcome Back", style = Theme[textStyles][title])
        Spacer(Modifier.height(24.dp))

        TextField(username, onValueChange = { username = it }, label = { Text("Username") }, singleLine = true)
        Spacer(Modifier.height(12.dp))
        TextField(password, onValueChange = { password = it }, label = { Text("Password") }, singleLine = true)
        Spacer(Modifier.height(24.dp))

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.End),
        ) {
            OutlinedButton(onClick = { visible = false }) {
                Text("Cancel")
            }
            PrimaryButton(onClick = { visible = false }) {
                Text("Enter")
            }
        }
    }

    PrimaryButton(onClick = { visible = true }) {
        Text("Show")
    }
}