Use a dialog for confirmation
On Android, you can show a dialog by using AlertDialog, BottomSheetDialog or DialogFragment. You should always add a close button by using the setNegativeButton) method. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.
kotlin
val builder = AlertDialog.Builder(this)
builder.setTitle("Confirm Appt membership?")
builder.setMessage("Your bank account will be billed.")
builder.setPositiveButton("Proceed") { dialog, which ->
// Proceed
}
builder.setNegativeButton("Cancel") { dialog, which ->
// Cancel
}
builder.show()On iOS, you can show an alert by using UIAlertController. Set the style to alert to display a dialog. You should always add a close action in the cancel style. The focus of assistive technologies is automatically trapped inside the alert while it's visible.
swift
let alert = UIAlertController(
title: "Confirm Appt membership?",
message: "Your bank account will be billed.",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "Proceed", style: .default, handler: { action in
// Proceed
}))
alert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: { action in
// Cancel
}))
present(alert, animated: true)In SwiftUI, you can show an alert-8584l) by using the .alert view modifier. The alert dialog presentation is determined by the @State variable. You should always include a close action with a .cancel button role. Assistive technologies automatically trap focus inside the alert while it's visible.
swift
@State private var showingAlert = false
var body: some View {
ContentView()
.alert("Confirm Appt membership?", isPresented: $showingAlert) {
Button("Proceed") {
// Proceed
}
Button("Cancel", role: .cancel) {
// Cancel
}
} message: {
Text("Your bank account will be billed.")
}
}With Flutter, you can use SimpleDialog, AlertDialog or CupertinoAlertDialog to show alerts. An AlertDialog is styled liked an Android dialog. A CupertinoAlertDialog is styled like an iOS dialog. You should always supply a close action in the actions array. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.
dart
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Confirm Appt membership?'),
content: Text('Your bank account will be billed.'),
actions: [
TextButton(
onPressed: confirmTransaction,
child: const Text('Proceed'),
),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel'),
)
],
),
);In React Native, you can use Alert to show a dialog. On Android you can add a neutral, negative and positive button, this is based on the amount of buttons that are set. On iOS it's possible to set the AlertButtonStyle for each button. You should always include a button to close the dialog. The focus of assistive technologies is automatically trapped inside the dialog while it's visible.
jsx
Alert.alert(
"Confirm Appt membership?",
"Your bank account will be billed.",
[
{
text: "Cancel",
onPress: () => {
// Cancel
},
style: "cancel"
},
{
text: "Proceed",
onPress: () => {
// Proceed
},
},
],
{
cancelable: true,
onDismiss: () => console.log("Dismissed alert"),
}
);In MAUI you can use the DisplayAlert method to show an alert. The last parameter of the method is the text of cancel button and it is required to supply it. Therefore, a cancel button is always shown. The focus of assistive technologies is automatically trapped inside the dialog while it is visible.
The code sample below shows how to show a dialog.
csharp
var accept = await App.Current.MainPage.DisplayAlert(
"Confirm Appt membership?",
"Your bank account will be billed.",
"Proceed",
"Cancel"
);
if (accept) {
// Proceed
} else {
// Cancel
}In Xamarin Forms you can use the DisplayAlert method to show an alert. The last parameter of the method is the text of cancel button and it is required to supply it. Therefore, a cancel button is always shown! The focus of assistive technologies is automatically trapped inside the dialog while it's visible.
csharp
var accept = await App.Current.MainPage.DisplayAlert(
"Confirm Appt membership?",
"Your bank account will be billed.",
"Proceed",
"Cancel"
);
if (accept) {
// Proceed
} else {
// Cancel
}