Available from v7.0.0
BB.Link
BB.Link is a SwiftUI view that displays a standalone text link with an optional icon for triggering navigation actions.
Platform availability: iOS 17.0+
When to use:
- Use BB.Link when displaying in-context navigation or secondary actions that do not require the visual weight of a button.
- Consider BB.Button with tertiary appearance for actions that need more prominence or BB.IconButton for icon-only navigation.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
Light Mode
|
Dark Mode |
API reference
BB.Link
BB.Link is a SwiftUI view that displays a standalone text link with a link icon which triggers an action. It is mainly used as an inner navigation control within the journey layout.
Initializers
init(hasIcon:title:action:)
Creates a new link with the specified configuration.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
hasIcon |
Bool |
true |
The hasIcon determines whether to show the link icon |
|
title |
String |
— |
The title specifies the text displayed on the link |
|
action |
@escaping () -> Void |
— |
The action callback triggered when tapped |
Methods
pressed(_:)
Controls the link's pressed style.
|
Parameter |
Type |
Description |
|---|---|---|
|
isPressed |
Bool |
The isPressed sets the color of the link based on its state |
Returns: Self - The modified link instance.
showIndicator(_:)
Toggles the visibility of a loading indicator on the link.
|
Parameter |
Type |
Description |
|---|---|---|
|
show |
Bool |
The show indicates whether to display the loading indicator |
Returns: Self - The modified link instance.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
hasIcon |
Bool |
true |
|
title |
String |
— |
hasIcon
The hasIcon property determines whether the link displays an icon alongside the text. Set to true to show the default link icon, or false for text-only display.
BB.Link(hasIcon: true, text: "Link with icon") {
print("Action triggered")
}
title
The title property specifies the text content displayed on the link.
BB.Link(text: "Navigate to details") {
print("Navigation action")
}
Usage
Basic usage
Create a simple link with or without an icon.
import SwiftUI
import BackbaseDesignSystem
BB.Link(hasIcon: false, text: "Some link without icon") {
print("This is an action")
}
BB.Link(text: "Some link with icon") {
print("This is an action")
}
Common use cases
With loading indicator
Display a loading state while an action is in progress.
BB.Link(text: "This is showing indicator") {
print("Showing")
}.showIndicator(true)
States and variants
Default state
The link displays in the brand color with optional icon.
Visual characteristics:
- Brand-colored text and icon
- Standard typography
BB.Link(text: "Default link") {
print("Action")
}
Pressed state
The link displays a pressed visual state when tapped or explicitly set.
Visual characteristics:
- Darker brand color for pressed feedback
BB.Link(text: "Pressed link") {
print("Pressed")
}.pressed(true)
Disabled state
The link is visually muted and non-interactive when disabled.
Visual characteristics:
- Muted foreground color
- No tap response
BB.Link(text: "Disabled link") {
print("Disabled")
}.disabled(true)
Loading state
The link displays a loading indicator while an action is in progress.
Visual characteristics:
- Loading spinner replaces or accompanies the icon
- Text remains visible
BB.Link(text: "Loading link") {
print("Loading")
}.showIndicator(true)
Customization
Styling
The BB.Link component uses the design system's link styling tokens. Customization is applied through the theming infrastructure.
Custom styles
To customize link appearance, modify the theme tokens in your custom JSON theme file and load it using Theme.switchTo():
Theme.switchTo("customTokens")
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.Link(text: "View details") {
// Handle navigation
}
.accessibilityLabel("View account details")
.accessibilityHint("Double tap to navigate to account details")
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 Link:
- color/link/default: Default link foreground color
- color/link/pressed: Pressed state foreground color
Default state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.default |
{theme.color.foreground.brand} |
Pressed state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.pressed |
{theme.color.foreground.brand-pressed} |
Disabled state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.disabled |
{theme.color.foreground.disabled} |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Default Foreground |
Theme.colors.foreground.brand |
Default link text and icon color |
|
Pressed Foreground |
Theme.colors.foreground.brandPressed |
Link color when pressed |
|
Disabled Foreground |
Theme.colors.foreground.disabled |
Link color when disabled |
See also
- BB.Button - Standard button component
- BB.IconButton - Icon button with optional title