Available from v1.0.0
Badge
Badge is a small text label used to highlight new, relevant, or updated content with themed type colors.
Platform availability: iOS 17.0+
When to use:
- Use Badge when you need to draw attention to new, updated, or important information such as status indicators, counts, or labels.
- Consider ChipView when the user needs to interact with or filter by the labeled content.
It includes the following features:
- Multiple themed variants (neutral, info, danger, success, warning).
- Configurable text color and content.
- Support for multi-line text wrapping.
- Integration with SummaryStackView via SummaryStackRow protocol.
Import
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
|
|
|
API reference
Badge
A UIView subclass that displays a small text badge to highlight new, relevant, or updated content with themed type colors.
Properties
|
Property |
Type |
Description |
|---|---|---|
|
text |
String? |
The text to be displayed in the badge |
|
textColor |
UIColor? |
The color of the text displayed in the badge |
|
numberOfLines |
Int |
The number of lines the badge can wrap text onto. Default is 1 |
|
customSpacingAfter |
CGFloat? |
The custom spacing for components after the Badge in a SummaryStackView |
Initializers
init(text:style:customSpacingAfter:)
Creates a badge view with custom spacing.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text of the badge. Default is "" |
|
style |
Style<Badge> |
The style of the badge. Default is DesignSystem.shared.styles.badge |
|
customSpacingAfter |
CGFloat? |
The custom spacing for components after this badge |
init(text:style:)
Creates a badge view for use as a SummaryStackRow.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text of the badge. Default is "" |
|
style |
Style<Badge> |
The style of the badge. Default is DesignSystem.shared.styles.badge |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
text |
String? |
"" |
|
textColor |
UIColor? |
Theme-dependent |
|
numberOfLines |
Int |
1 |
text
The text property sets the content displayed in the badge.
let badge = Badge()
badge.text = "New"
numberOfLines
The numberOfLines property controls text wrapping. Set to 0 for unlimited lines.
let badge = Badge(text: "This is a longer badge text")
badge.numberOfLines = 2
Usage
Basic usage
let badge = Badge(text: "New")
With custom style
let badge = Badge(
text: "Important",
style: DesignSystem.shared.styles.badgeDanger
)
Multi-line badge
let badge = Badge(text: "This is a longer badge text")
badge.numberOfLines = 2
Custom spacing in SummaryStackView
let badge = Badge(
text: "Status",
style: DesignSystem.shared.styles.badge,
customSpacingAfter: 16.0
)
States and variants
Neutral
The default badge style for general-purpose labeling.
Visual characteristics:
- Neutral background color
- Standard text color
let badge = Badge(text: "Default", style: DesignSystem.shared.styles.badgeNeutral)
Info
Used for informational content.
Visual characteristics:
- Info-themed background
- Info text color
let badge = Badge(text: "Info", style: DesignSystem.shared.styles.badgeInfo)
Success
Indicates positive status or successful completion.
Visual characteristics:
- Success-themed background
- Success text color
let badge = Badge(text: "Complete", style: DesignSystem.shared.styles.badgeSuccess)
Warning
Draws attention to items requiring caution.
Visual characteristics:
- Warning-themed background
- Warning text color
let badge = Badge(text: "Pending", style: DesignSystem.shared.styles.badgeWarning)
Danger
Highlights critical or error states.
Visual characteristics:
- Danger-themed background
- Danger text color
let badge = Badge(text: "Error", style: DesignSystem.shared.styles.badgeDanger)
Customization
Styling
|
Style |
Description |
|---|---|
|
DesignSystem.shared.styles.badge |
Default badge style |
|
DesignSystem.shared.styles.badgeInfo |
Info themed badge style |
|
DesignSystem.shared.styles.badgeDanger |
Danger themed badge style |
|
DesignSystem.shared.styles.badgeSuccess |
Success themed badge style |
|
DesignSystem.shared.styles.badgeWarning |
Warning themed badge style |
|
DesignSystem.shared.styles.badgeNeutral |
Neutral themed badge style |
Accessibility
The Badge 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 |
Description |
Type |
|---|---|---|
|
accessibilityLabel |
The accessible label for the badge |
String? |
|
isAccessibilityElement |
Whether the badge is an accessibility element |
Bool |
Best practices
- The badge uses a UILabel internally which supports VoiceOver
- The text content is automatically accessible to screen readers
- Set meaningful accessibility labels when the badge text alone does not convey context
Dependencies
- External dependencies: None
- Internal dependencies: SummaryStackRow: Protocol for stack view integration
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
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.fonts.preferredFont(.caption1, .regular) |
Badge text font |
|
Styles |
DesignSystem.shared.styles.badge |
Default badge style |
|
Styles |
DesignSystem.shared.styles.badgeInfo |
Info themed badge style |
|
Styles |
DesignSystem.shared.styles.badgeDanger |
Danger themed badge style |
|
Styles |
DesignSystem.shared.styles.badgeSuccess |
Success themed badge style |
|
Styles |
DesignSystem.shared.styles.badgeWarning |
Warning themed badge style |
|
Styles |
DesignSystem.shared.styles.badgeNeutral |
Neutral themed badge style |
See also