Available from v8.0.0
BB.InlineAlert
BB.InlineAlert is a SwiftUI component that displays an inline alert view for important information, warnings, or success messages.
Platform availability: iOS 17.0+
When to use:
- Use BB.InlineAlert when you need to communicate contextual feedback, warnings, or success messages within the page content flow.
- Consider BB.Banner for full-width notifications or BB.Toast for temporary, auto-dismissing messages.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
|
Title Only |
Title & Subtitle |
Multiple Actions |
API reference
BB.InlineAlert
Enumerations
Appearance
Represents different visual styles and semantic meanings of the inline alert.
|
Case |
Description |
|---|---|
|
info |
Informational messages with blue styling |
|
success |
Success messages with green styling |
|
warning |
Warning messages with yellow/orange styling |
|
danger |
Error or critical messages with red styling |
Initializers
init(appearance:title:subtitle:showIcon:closeAction:)
Initializes a new inline alert instance.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
appearance |
Appearance |
— |
The visual style and semantic meaning of the alert |
|
title |
String |
— |
The main text displayed in the alert |
|
subtitle |
String? |
nil |
Optional secondary text displayed below the title |
|
showIcon |
Bool |
true |
Determines whether to display an icon |
|
closeAction |
(() -> Void)? |
nil |
Optional closure to execute when the close button is tapped |
Methods
primaryButton(text:action:)
Adds a primary action button to the inline alert.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String? |
The text displayed on the primary button |
|
action |
@escaping () -> Void |
The action to execute when the primary button is tapped |
Returns: some View - The modified inline alert with a primary button
secondaryButton(text:action:)
Adds a secondary action button to the inline alert.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String? |
The text displayed on the secondary button |
|
action |
@escaping () -> Void |
The action to execute when the secondary button is tapped |
Returns: some View - The modified inline alert with a secondary button
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
appearance |
Appearance |
— |
|
title |
String |
— |
|
subtitle |
String? |
nil |
|
showIcon |
Bool |
true |
|
closeAction |
(() -> Void)? |
nil |
appearance
The appearance property defines the visual style and semantic meaning of the alert. Choose from info, success, warning, or danger based on the message context.
BB.InlineAlert(
appearance: .warning,
title: "Warning message"
)
title
The title property sets the main text displayed in the alert. This is the primary message users will see.
BB.InlineAlert(
appearance: .info,
title: "Your session will expire in 5 minutes"
)
subtitle
The subtitle property sets optional secondary text displayed below the title for additional context.
BB.InlineAlert(
appearance: .info,
title: "Information",
subtitle: "This is additional context for the alert"
)
showIcon
The showIcon property determines whether to display an icon alongside the alert message. Defaults to true.
BB.InlineAlert(
appearance: .success,
title: "Success",
showIcon: false
)
closeAction
The closeAction property sets an optional closure to execute when the close button is tapped. When provided, a close button appears in the alert.
BB.InlineAlert(
appearance: .warning,
title: "Warning",
closeAction: {
print("Alert closed")
}
)
Usage
Basic usage
Create a simple informational alert.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.InlineAlert(
appearance: .info,
title: "Information",
subtitle: "This is an informational message"
)
}
}
With close action
Create an alert with a dismissible close button.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.InlineAlert(
appearance: .warning,
title: "Warning",
subtitle: "Please review your input",
closeAction: {
print("Alert closed")
}
)
}
}
With action buttons
Create an alert with primary and secondary action buttons.
import SwiftUI
import BackbaseDesignSystem
struct ContentView: View {
var body: some View {
BB.InlineAlert(
appearance: .success,
title: "Success",
subtitle: "Your changes have been saved"
)
.primaryButton(text: "Continue") {
print("Continue tapped")
}
.secondaryButton(text: "Undo") {
print("Undo tapped")
}
}
}
States and variants
Info
The info appearance is used for informational messages that do not require immediate action.
Visual characteristics:
- Blue background tint
- Information icon
- Subtle styling for non-critical content
BB.InlineAlert(
appearance: .info,
title: "Information",
subtitle: "Your account has been updated"
)
Success
The success appearance is used for success messages confirming completed actions.
Visual characteristics:
- Green background tint
- Checkmark icon
- Positive feedback styling
BB.InlineAlert(
appearance: .success,
title: "Success",
subtitle: "Your payment was successful"
)
Warning
The warning appearance is used for warning messages that require user attention.
Visual characteristics:
- Yellow/orange background tint
- Warning triangle icon
- Attention-grabbing styling
BB.InlineAlert(
appearance: .warning,
title: "Warning",
subtitle: "Your session will expire soon"
)
Danger
The danger appearance is used for error or critical messages.
Visual characteristics:
- Red background tint
- Error icon
- High-priority styling
BB.InlineAlert(
appearance: .danger,
title: "Error",
subtitle: "Unable to process your request"
)
Customization
Styling
The component appearance is controlled through the appearance parameter. Each appearance maps to semantic colors from the design system.
|
Appearance |
Description |
|---|---|
|
.info |
Informational styling with blue tones |
|
.success |
Success styling with green tones |
|
.warning |
Warning styling with yellow/orange tones |
|
.danger |
Error styling with red tones |
Custom content
Customize the alert content using the title, subtitle, and action button modifiers.
BB.InlineAlert(
appearance: .info,
title: "Custom Alert",
subtitle: "With custom buttons"
)
.primaryButton(text: "Action") {
// Handle action
}
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.InlineAlert()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
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 groups used by InlineAlert:
- color/emblem/info: Info appearance background and icon colors
- color/emblem/success: Success appearance background and icon colors
- color/emblem/warning: Warning appearance background and icon colors
- color/emblem/danger: Danger appearance background and icon colors
Info appearance tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.info.background |
{theme.color.background.info-subtle} |
|
Icon |
theme.color.emblem.info.icon |
{theme.color.foreground.info} |
Success appearance tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.success.background |
{theme.color.background.success-subtle} |
|
Icon |
theme.color.emblem.success.icon |
{theme.color.foreground.success} |
Warning appearance tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.warning.background |
{theme.color.background.warning-subtle} |
|
Icon |
theme.color.emblem.warning.icon |
{theme.color.foreground.warning} |
Danger appearance tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.emblem.danger.background |
{theme.color.background.danger-subtle} |
|
Icon |
theme.color.emblem.danger.icon |
{theme.color.foreground.danger} |
Dimension tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Corner Radius (sm) |
theme.radius.emblem.sm |
8 |
|
Height (sm) |
theme.height.emblem.sm |
40 |
|
Border Width |
theme.border-width.emblem.default |
1 |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Info Background |
Theme.colors.background.infoSubtle |
Info alert background |
|
Info Foreground |
Theme.colors.foreground.info |
Info icon and accent color |
|
Success Background |
Theme.colors.background.successSubtle |
Success alert background |
|
Success Foreground |
Theme.colors.foreground.success |
Success icon and accent color |
|
Warning Background |
Theme.colors.background.warningSubtle |
Warning alert background |
|
Warning Foreground |
Theme.colors.foreground.warning |
Warning icon and accent color |
|
Danger Background |
Theme.colors.background.dangerSubtle |
Danger alert background |
|
Danger Foreground |
Theme.colors.foreground.danger |
Danger icon and accent color |