Available from v1.7.0
InlineAlert
InlineAlert is an inline notification component for displaying contextual messages with configurable styles (info, warning, danger, success).
Platform availability: iOS 17.0+
When to use:
- Use InlineAlert when you need to display contextual information, warnings, or feedback within a screen's content flow.
- Consider using a modal alert for notifications that require immediate user attention and block interaction.
- Consider using StateView for full-screen error or empty states.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
API reference
InlineAlert
A UIView subclass for displaying inline alert messages with configurable styling.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
titleLabel |
UILabel |
The titleLabel displays the alert title text. |
|
subtitleLabel |
UILabel |
The subtitleLabel displays the alert subtitle or message text. |
|
iconView |
UIImageView |
The iconView displays the alert icon image. |
|
dismissButton |
UIButton |
The dismissButton dismisses the alert when tapped. |
|
buttonPrimary |
UIButton |
The buttonPrimary triggers the primary action. |
|
buttonSecondary |
UIButton |
The buttonSecondary triggers the secondary action. |
|
containerView |
UIView? |
The containerView contains the alert content layout. |
Initializers
init(content:)
Initializes an InlineAlert with the given content.
|
Parameter |
Type |
Description |
|---|---|---|
|
content |
InlineAlert.Content |
The content configuration for the alert |
InlineAlert.Content
|
Property |
Type |
Description |
|---|---|---|
|
title |
String |
The title specifies the alert title text. |
|
subtitle |
String? |
The subtitle specifies the alert message text. |
|
buttonPrimary |
Button? |
The buttonPrimary configures the primary action button. |
|
buttonSecondary |
Button? |
The buttonSecondary configures the secondary action button. |
|
dismissAction |
(() -> Void)? |
The dismissAction closure is called when the dismiss button is tapped. |
InlineAlert.Content.Button
|
Property |
Type |
Description |
|---|---|---|
|
title |
String |
The title specifies the button text. |
|
action |
() -> Void |
The action closure is called when the button is tapped. |
Usage
Basic usage
var alert: InlineAlert = {
let content = InlineAlert.Content(title: "This is this alert title", dismissAction: {
// Dismiss action
})
let alert = InlineAlert(content: content)
DesignSystem.shared.styles.inlineAlertStyles.info(alert)
return alert
}()
With action buttons
var alert: InlineAlert = {
let buttonPrimary = InlineAlert.Content.Button(title: "Main action", action: {
// Do the main action
})
let buttonSecondary = InlineAlert.Content.Button(title: "Secondary action", action: {
// Do the secondary action
})
let content = InlineAlert.Content(title: "Update Available",
subtitle: "There's an update waiting for you in the AppStore",
buttonPrimary: buttonPrimary,
buttonSecondary: buttonSecondary,
dismissAction: {
// Dismiss action
})
let alert = InlineAlert(content: content)
DesignSystem.shared.styles.inlineAlertStyles.info(alert)
return alert
}()
States and variants
The InlineAlert component supports four visual states to communicate different types of messages:
|
State |
Style |
Use case |
|---|---|---|
|
Info |
inlineAlertStyles.info |
General information and tips |
|
Warning |
inlineAlertStyles.warning |
Cautionary messages |
|
Danger |
inlineAlertStyles.danger |
Error messages and critical alerts |
|
Success |
inlineAlertStyles.success |
Confirmation and success messages |
Customization
Styling
Four out-of-the-box styles are available:
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.inlineAlertStyles.info |
Info alert style |
|
DesignSystem.shared.styles.inlineAlertStyles.warning |
Warning alert style |
|
DesignSystem.shared.styles.inlineAlertStyles.danger |
Danger alert style |
|
DesignSystem.shared.styles.inlineAlertStyles.success |
Success alert style |
Custom styles
Create your own custom style for an inline alert:
let myCustomStyle: Style<InlineAlert> = { alert in
let fonts = DesignSystem.shared.fonts
let closeIcon = DesignSystem.Assets.icClose
let colorVariant = UIColor.red
DesignSystem.shared.styles.cornerRadius(.medium(roundedCorners: .allCorners))(alert.layer)
alert.titleLabel.font = fonts.preferredFont(.headline, .semibold)
alert.subtitleLabel.font = fonts.preferredFont(.subheadline, .regular)
alert.dismissButton.setImage(closeIcon, for: .normal)
let styleButton: Style<UIButton> = { button in
button.backgroundColor = UIColor.blue
button.setTitleColor(UIColor.yellow, for: .normal)
}
styleButton(alert.buttonPrimary)
styleButton(alert.buttonSecondary)
alert.buttonPrimary.titleLabel?.font = fonts.preferredFont(.body, .semibold)
alert.buttonSecondary.titleLabel?.font = fonts.preferredFont(.body, .regular)
let addBorders: (UIView) -> Void = { view in
view.layer.borderWidth = 1
view.layer.borderColor = UIColor.purple.cgColor
}
if let containerView = alert.containerView {
Current.styles.cornerRadius(.large(roundedCorners: .allCorners))(containerView.layer)
addBorders(containerView)
}
addBorders(alert.buttonPrimary)
addBorders(alert.buttonSecondary)
Current.styles.shadow(.small)(alert.layer)
alert.backgroundColor = UIColor.white
alert.titleLabel.textColor = UIColor.black
alert.subtitleLabel.textColor = UIColor.gray
alert.dismissButton.tintColor = UIColor.black
alert.iconView.tintColor = UIColor.black
alert.iconView.image = DesignSystem.Assets.icCheckCircleOutline
}
Accessibility
The InlineAlert component is accessible by default with semantic elements that VoiceOver announces.
|
Element |
Accessibility behavior |
|---|---|
|
titleLabel |
Announced as static text |
|
subtitleLabel |
Announced as static text |
|
buttonPrimary |
Announced as button with title |
|
buttonSecondary |
Announced as button with title |
|
dismissButton |
Announced as button |
Best practices:
- Set descriptive button titles for clear VoiceOver announcements
- Use alert styles consistently to establish user expectations for color meanings
Dependencies
- External dependencies: None
- Internal dependencies:
- Button: Used for action buttons
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Info Color |
theme.color.emblem.info |
{theme.color.background.info} |
|
Success Color |
theme.color.emblem.success |
{theme.color.background.success} |
|
Warning Color |
theme.color.emblem.warning |
{theme.color.background.warning} |
|
Danger Color |
theme.color.emblem.danger |
{theme.color.background.danger} |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Info Style |
DesignSystem.shared.styles.inlineAlertStyles.info |
Info alert style |
|
Success Style |
DesignSystem.shared.styles.inlineAlertStyles.success |
Success alert style |
|
Warning Style |
DesignSystem.shared.styles.inlineAlertStyles.warning |
Warning alert style |
|
Danger Style |
DesignSystem.shared.styles.inlineAlertStyles.danger |
Danger alert style |
|
Title Typography |
DesignSystem.shared.fonts.preferredFont(.headline, .semibold) |
Title label font |
|
Subtitle Typography |
DesignSystem.shared.fonts.preferredFont(.subheadline, .regular) |
Subtitle label font |
|
Spacing |
DesignSystem.shared.spacer.md |
Medium spacing |
|
Corner Radius |
DesignSystem.shared.styles.cornerRadius(.medium) |
Medium corner radius |
|
Corner Radius |
DesignSystem.shared.styles.cornerRadius(.large) |
Large corner radius for container |
|
Shadow |
DesignSystem.shared.styles.shadow(.small) |
Small shadow effect |