Import
Jetpack Compose framework
Add the Link to your composable functions by importing the design system components.
import com.backbase.android.design.component.Link
Usage
To use the Link component, simply include it in your composable function.
Link(
text = "Learn more",
onClick = { /* Handle click */ }
)
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
enabled |
Boolean |
true |
|
icon |
Painter? |
Icons.Painter.iconOpenInNew |
|
inProgress |
Boolean |
false |
|
isPressed |
Boolean |
false |
|
modifier |
Modifier |
Modifier |
|
onClick |
() -> Unit |
Required |
|
text |
String |
Required |
enabled
Determines if the link is clickable.
Link(
text = "Inactive link",
onClick = { performAction() },
enabled = false
)
icon
Optional icon displayed alongside the link text.
Link(
text = "Open Website",
onClick = { openURL() },
icon = Icons.Painter.iconLink
)
inProgress
Displays a loading state if true.
Link(
text = "Loading...",
onClick = { performAction() },
inProgress = true
)
isPressed
Indicates whether the link is currently pressed.
Link(
text = "Pressable link",
onClick = { handleAction() },
isPressed = isPressed
)
modifier
Allows additional styling and layout modifications.
Link(
text = "Styled link",
onClick = { performAction() },
modifier = Modifier.padding(16.dp)
)
onClick
The callback triggered when the link is clicked.
Link(
text = "Submit form",
onClick = {
// Handle form submission
submitForm()
}
)
text
The text displayed inside the link.
Link(
text = "View details",
onClick = { showDetails() }
)
Styling
The Link component reads theme attributes for styling. The color and layout values are mapped from the BackbaseThemeAdapter attributes.
Link with icon
You can add an icon to the link to indicate navigation or external redirection:
Link(
text = "Open Website",
icon = Icons.Painter.iconLink,
onClick = { /* Handle navigation */ }
)
Disabled link
If enabled is set to false, the link will appear inactive and non-clickable:
Link(
text = "Unavailable",
enabled = false,
onClick = { /* No action */ }
)
Loading state
Set inProgress to true to indicate that an action is being processed:
Link(
text = "Loading...",
inProgress = true,
onClick = { /* Handle loading state */ }
)
Accessibility
Ensure the link is accessible by providing meaningful text and considering screen reader support:
Link(
text = "Read more about accessibility",
onClick = { /* Navigate */ }
)
Best practices
- Use descriptive text that clearly indicates the link's purpose
- Provide meaningful content descriptions when the link text might be unclear
- Consider the context when writing link text for screen reader users
- Test with TalkBack screen reader for accessibility compliance
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group link:
- progressBarColor: Color for the loading indicator
- iconColorEnabled: Icon color when enabled
- iconColorDisabled: Icon color when disabled
- iconColorPressed: Icon color when pressed
- textColorEnabled: Text color when enabled
- textColorDisabled: Text color when disabled
- textColorPressed: Text color when pressed
- iconSize: Dimensions for the link icon
- progressSize: Size of the loading indicator
- spaceBetweenIconAndText: Spacing between icon and text