Available from v1.7.0
Dialogue
Dialogue is a modal dialog component for presenting important information or actions that require user attention.
Platform availability: iOS 17.0+
When to use:
- Use Dialogue when you need to interrupt the user flow for confirmations, critical alerts, or decisions that require immediate attention.
- Consider using inline messaging or banners when the information is contextual and does not require blocking user interaction.
Import
import BackbaseDesignSystem
Visual reference
Dialog Box |
Dialog On Device
|
API reference
The Dialogue component uses UIAlertController with design system styling applied. For custom dialog implementations, use a styled Card component with modal presentation.
UIAlertController
The standard approach uses UIAlertController with .alert or .actionSheet preferred style.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
title |
String? |
The title displays the dialog header text. |
|
message |
String? |
The message displays the dialog body text. |
|
preferredStyle |
UIAlertController.Style |
The preferredStyle determines alert or action sheet presentation. |
Custom dialog with Card
For custom implementations, use the Card component as a container with Button components for actions.
Configuration
Dialog styling corresponds to the following design system properties:
|
Property |
Description |
|---|---|
|
design.colors.surfacePrimary.default |
Background color. |
|
design.colors.surfacePrimary.onSurfacePrimary.default |
Text color. |
|
design.styles.shadow(.medium) |
Shadow styling. |
Usage
Information dialog
let alert = UIAlertController(
title: "Information",
message: "Your changes have been saved.",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "OK", style: .default))
present(alert, animated: true)
Confirmation dialog
let alert = UIAlertController(
title: "Delete Item",
message: "Are you sure you want to delete this item? This action cannot be undone.",
preferredStyle: .alert
)
alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
alert.addAction(UIAlertAction(title: "Delete", style: .destructive) { _ in
self.deleteItem()
})
present(alert, animated: true)
Action sheet dialog
let actionSheet = UIAlertController(
title: "Choose an Option",
message: nil,
preferredStyle: .actionSheet
)
actionSheet.addAction(UIAlertAction(title: "Option 1", style: .default) { _ in
// Handle option 1
})
actionSheet.addAction(UIAlertAction(title: "Option 2", style: .default) { _ in
// Handle option 2
})
actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel))
// For iPad support
if let popover = actionSheet.popoverPresentationController {
popover.sourceView = self.view
popover.sourceRect = CGRect(
x: view.bounds.midX,
y: view.bounds.midY,
width: 0,
height: 0
)
popover.permittedArrowDirections = []
}
present(actionSheet, animated: true)
States and variants
The Dialogue component supports multiple presentation styles:
|
Variant |
Style |
Use case |
|---|---|---|
|
Alert |
.alert |
Confirmation dialogs and critical messages |
|
Action Sheet |
.actionSheet |
Multiple action options presented from bottom |
|
Custom Card |
Card component |
Fully customized dialog appearance |
Customization
For custom dialogs that require more control over appearance and behavior, create a custom view controller with:
- A Card component as the container.
- Button components for actions.
- Custom layout and animations.
Example custom dialog
class CustomDialogViewController: UIViewController {
private let cardView = Card()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
view.addSubview(cardView)
cardView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
cardView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
cardView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
cardView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.8),
])
// Add content to cardView...
}
}
Accessibility
When using UIAlertController, accessibility is handled automatically. For custom dialogs, configure the following:
|
Configuration |
Description |
|---|---|
|
accessibilityViewIsModal |
Set to true on the dialog container. |
|
VoiceOver focus |
Move focus to the dialog when presented. |
|
Accessibility labels |
Set on all interactive elements. |
Best practices:
- Use UIAccessibility.post(notification: .screenChanged, argument: dialogView) to move VoiceOver focus
- Set meaningful accessibilityLabel values on custom buttons
- Include dismiss action in the accessibility order
Dependencies
- External dependencies: None
- Internal dependencies: Card, Button (for custom dialogs)
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Dialogue components rely on global surface, foreground, and shadow tokens rather than component-specific JSON tokens.
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.background.default |
Dialog background color |
|
Colors |
Theme.colors.foreground.default |
Dialog text color |
|
Colors |
Theme.colors.surfacePrimary.default |
Surface background color |
|
Colors |
Theme.colors.surfacePrimary.onSurfacePrimary.default |
Text color on surface |
|
Shadows |
DesignSystem.shared.styles.shadow(.medium) |
Dialog shadow styling |
See also
- Card - Container component for custom dialogs
- Button - Action button component
- ButtonGroup - Button group with action sheet support