Available from v7.0.0
BB.Chip
BB.Chip is a SwiftUI view similar to Android's Material Chip component, used for filtering and displaying compact options.
Platform availability: iOS 17.0+
When to use:
- Use BB.Chip when displaying selected filters, tags, or compact selectable options that users can add or remove.
- Consider BB.Badge for non-interactive status indicators or BB.Button for primary actions.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
Light |
Dark |
|
|
|
|
API reference
BB.Chip
Initializers
init(icon:text:tapAction:dismissAction:)
Creates a new chip with the specified configuration.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
icon |
Image? |
nil |
The icon is an optional leading image to be displayed |
|
text |
String |
— |
The text content of the chip view |
|
tapAction |
(() -> Void)? |
nil |
The tapAction callback triggered when the chip is tapped |
|
dismissAction |
(() -> Void)? |
nil |
The dismissAction callback triggered when the close button is tapped; if nil, the dismiss button is hidden |
BB.ChipCollection
A grid-like container for displaying multiple chips with horizontal and vertical alignment.
Note: This component is deprecated by default until iOS 17 is the minimum supported target. As of iOS 17 onwards, the Grid component is available.
Initializers
init(chips:horizontalSpacing:verticalSpacing:)
Creates a chip collection with the specified chips and spacing.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
chips |
[BB.Chip] |
— |
The chips array of chips to display |
|
horizontalSpacing |
CGFloat |
System default |
The horizontalSpacing between chips |
|
verticalSpacing |
CGFloat |
System default |
The verticalSpacing between rows |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
icon |
Image? |
nil |
|
text |
String |
— |
|
tapAction |
(() -> Void)? |
nil |
|
dismissAction |
(() -> Void)? |
nil |
icon
The icon property specifies an optional leading image displayed before the text content.
BB.Chip(
icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "Date filter"
)
text
The text property specifies the label content displayed on the chip.
BB.Chip(text: "Selected filter")
tapAction
The tapAction property is an optional callback triggered when the chip body is tapped.
BB.Chip(text: "Tappable chip", tapAction: {
print("Chip tapped")
})
dismissAction
The dismissAction property is an optional callback triggered when the dismiss button is tapped. When provided, the chip displays a dismiss button.
BB.Chip(text: "Dismissible chip", dismissAction: {
print("Chip dismissed")
})
Usage
Basic usage
Create a simple chip with text and optional actions.
BB.Chip(text: "Chip with text only",
dismissAction: { /* Add your code here */ })
BB.Chip(text: "Chip with text only",
tapAction: { /* Add chip tap handling code here */ })
Common use cases
Chip with icon
Display a chip with a leading icon.
BB.Chip(
icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "Date filter",
tapAction: { /* Handle tap */ }
)
Advanced usage
Combine with SwiftUI APIs for extended functionality.
BB.Chip(icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "Chip with image",
tapAction: { /* Add chip tap handling code here */ },
dismissAction: { /* Add chip tap handling code here */ })
.alert(isPresented: $showTextChipDismissAlert) {
Alert(title: Text("Title"), message: Text("Message"))
}
ChipCollection usage
Display multiple chips in a grid layout.
BB.ChipCollection(chips: [
BB.Chip(text: "Chip with text only",
dismissAction: { /* Add your code here */ }),
BB.Chip(icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "Chip with image",
tapAction: { /* Add chip tap handling code here */ })
])
ChipCollection with custom spacing
BB.ChipCollection(chips: [
BB.Chip(text: "Chip with text only",
dismissAction: { /* Add your code here */ }),
BB.Chip(icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "Chip with image",
tapAction: { /* Add chip tap handling code here */ })
],
horizontalSpacing: DesignSystem.shared.spacer.md,
verticalSpacing: DesignSystem.shared.spacer.sm)
States and variants
Text-only chip
A chip displaying only text content.
Visual characteristics:
- Brand-subtle background
- Text label centered
- No leading icon
BB.Chip(text: "Text only")
Chip with icon
A chip displaying a leading icon alongside text.
Visual characteristics:
- Brand-subtle background
- Leading icon before text
- Consistent spacing between icon and text
BB.Chip(
icon: Image.named(DesignSystem.Assets.icDateRange, in: .design),
text: "With icon"
)
Dismissible chip
A chip with a dismiss button for removal.
Visual characteristics:
- Trailing dismiss button (X icon)
- Dismiss action triggered on button tap
BB.Chip(text: "Dismissible", dismissAction: {
print("Dismissed")
})
Interactive chip
A chip that responds to tap gestures on the body.
Visual characteristics:
- Full chip body is tappable
- Visual feedback on tap
BB.Chip(text: "Tappable", tapAction: {
print("Tapped")
})
Customization
Styling
The BB.Chip component uses the design system's chip styling tokens. Customization is applied through the theming infrastructure.
Custom styles
To customize chip 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.Chip(text: "Date filter", dismissAction: {
// Handle dismiss
})
.accessibilityLabel("Date filter chip")
.accessibilityHint("Double tap to remove this filter")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses semantic tokens only. See Semantic tokens below.
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
Color tokens:
|
Token |
API Reference |
Description |
|---|---|---|
|
Background |
Theme.colors.background.brandSubtle |
Chip background color |
|
Foreground |
Theme.colors.onBackground.brandSubtle |
Chip text and icon color |
Additional tokens:
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.typography |
Chip text styling |
|
Spacer |
DesignSystem.shared.spacer |
Spacing between chips in collection |
|
Icons |
DesignSystem.shared.icons |
Dismiss button icon |
Localization
The following strings are available for localization:
|
Key |
Default Value |
Description |
|---|---|---|
|
DesignSystem.bb.chip.accessibility.icon |
"%@ chip icon" |
Accessibility label format for chip icon |
|
DesignSystem.bb.chip.accessibility.dismissButton |
"%@ chip dismiss button" |
Accessibility label format for dismiss button |
To customize these strings, add the keys to your app's Localizable.strings file.