Available from v7.4.0
Link
Link is a themed text link control with consistent styling and behavior for clickable text links within journey layouts.
Platform availability: iOS 17.0+
When to use:
- Use Link when you need to navigate users to external resources, detailed information, or secondary screens without prominent button styling.
- Consider using Button when the action is a primary call-to-action that requires more visual emphasis.
Features:
- Optional external link icon display.
- Loading state with activity indicator.
- Automatic state-based appearance updates (enabled, highlighted, disabled).
- Built-in accessibility support with link traits.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
API reference
Link
Properties
|
Property |
Type |
Description |
|---|---|---|
|
hasIcon |
Bool |
Boolean to show/hide the external link icon. Defaults to true. |
|
isEnabled |
Bool |
Boolean to enable/disable the link. Inherited from UIControl. |
|
isHighlighted |
Bool |
Boolean indicating the highlighted state. Inherited from UIControl. |
Initializers
init(text:hasIcon:action:)
Creates a link with the specified text, icon visibility, and tap action.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text displayed on the link |
|
hasIcon |
Bool |
Whether to show the external link icon. Default is true |
|
action |
@escaping () -> Void |
The action to execute when the link is tapped |
Methods
setLoading(_:)
Sets the loading state. When true, shows an activity indicator and hides the text and icon.
|
Parameter |
Type |
Description |
|---|---|---|
|
loading |
Bool |
Whether to show the loading state |
setText(_:)
Updates the link text and accessibility label.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The new text to display |
Usage
Basic link with icon
let link = Link(text: "Open External Link") {
print("Link tapped")
}
view.addSubview(link)
Link without icon
let link = Link(
text: "Terms and Conditions",
hasIcon: false
) {
navigationController?.pushViewController(termsVC, animated: true)
}
view.addSubview(link)
Link with loading state
let link = Link(text: "Download Report") {
link.setLoading(true)
downloadReport { success in
DispatchQueue.main.async {
link.setLoading(false)
if success {
// Handle successful download
}
}
}
}
view.addSubview(link)
Updating link text
let link = Link(text: "Initial Text") {
// Handle action
}
// Later update the text
link.setText("Updated Link Text")
Disabling the link
let link = Link(text: "Disabled Link") {
// This won't be called when disabled
}
link.isEnabled = false
States and variants
Link states
|
State |
Description |
|---|---|
|
Default |
The defaultColor is applied with optional icon visible |
|
Pressed |
The pressedColor is applied when the link is being pressed |
|
Disabled |
The disabledColor is applied, interaction is disabled |
|
Loading |
Activity indicator is shown, text and icon are hidden |
Icon variants
|
Variant |
Description |
|---|---|
|
With icon |
The hasIcon property is true, external link icon is displayed |
|
Without icon |
The hasIcon property is false, text only |
Customization
Theming
The Link component uses theme tokens from defaultTokens.json for consistent styling:
|
Token Path |
Description |
|---|---|
|
theme.color.link.default |
The color for the default state |
|
theme.color.link.pressed |
The color for the highlighted/pressed state |
|
theme.color.link.disabled |
The color for the disabled state |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
Accessibility configuration
|
Property |
Type |
Description |
|---|---|---|
|
accessibilityTraits |
UIAccessibilityTraits |
Set to .link automatically |
|
accessibilityLabel |
String? |
Updated automatically when text changes via setText(_:) |
|
isAccessibilityElement |
Bool |
Set to true automatically |
Best practices
- Use descriptive link text that explains the destination or action.
- The component automatically prevents VoiceOver interaction when in loading or disabled states.
- Avoid generic text like "Click here" - use meaningful descriptions instead.
Dependencies
- External dependencies: None
- Internal dependencies: None
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: Link color states for default, pressed, and disabled states
Default state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.default.foreground |
{theme.color.foreground.brand} |
Pressed state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.pressed.foreground |
{theme.color.foreground.brand-pressed} |
Disabled state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Foreground |
theme.color.link.disabled.foreground |
{theme.color.foreground.disabled} |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Default Color |
theme.color.link.default |
Default link color (from JSON) |
|
Pressed Color |
theme.color.link.pressed |
Pressed state color (from JSON) |
|
Disabled Color |
theme.color.link.disabled |
Disabled state color (from JSON) |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.body, .regular) |
Link text font |
See also
- Button - Standard button component for primary actions