Available from v7.0.0
BB.Badge
BB.Badge is a SwiftUI view that displays a small amount of text with a corresponding color to draw attention to new or updated content.
Platform availability: iOS 17.0+
When to use:
- Use BB.Badge when highlighting status, counts, or brief labels that need visual emphasis.
- Consider BB.Chip when you need an interactive, tappable badge-like element with actions.
Import
import BackbaseDesignSystem
import SwiftUI
Visual reference
|
|
|
|
|
API reference
BB.Badge
Initializers
init(text:appearance:)
Creates a new badge with the specified text and appearance.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String |
The text to be displayed on the badge |
|
appearance |
BB.Badge.Appearance |
The appearance determines the flavor and style of the badge |
Appearance
The BB.Badge.Appearance enumeration defines the available badge styles.
public enum Appearance: String, CaseIterable {
case neutral
case info
case success
case warning
case danger
}
|
Value |
Description |
|---|---|
|
.neutral |
Neutral badge with gray background |
|
.info |
Informational badge with blue background |
|
.success |
Success badge with green background |
|
.warning |
Warning badge with yellow background |
|
.danger |
Danger badge with red background |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
text |
String |
— |
|
appearance |
BB.Badge.Appearance |
— |
text
The text property specifies the content displayed within the badge. Keep badge text brief for optimal display.
BB.Badge(text: "New", appearance: .info)
appearance
The appearance property determines the visual style and color scheme of the badge.
BB.Badge(text: "Error", appearance: .danger)
Usage
Basic usage
Create a badge by specifying text and an appearance variant.
BB.Badge(text: "Neutral badge", appearance: .neutral)
Common use cases
Status indicators
Use badges to indicate the status of items.
BB.Badge(text: "New", appearance: .info)
BB.Badge(text: "Success", appearance: .success)
BB.Badge(text: "Warning", appearance: .warning)
BB.Badge(text: "Error", appearance: .danger)
States and variants
Neutral
The neutral appearance displays a gray badge for general-purpose labeling.
Visual characteristics:
- Gray background color
- Dark foreground text
BB.Badge(text: "Neutral", appearance: .neutral)
Info
The info appearance displays a blue badge for informational content.
Visual characteristics:
- Blue background color
- Contrasting foreground text
BB.Badge(text: "Info", appearance: .info)
Success
The success appearance displays a green badge for positive status indicators.
Visual characteristics:
- Green background color
- Contrasting foreground text
BB.Badge(text: "Success", appearance: .success)
Warning
The warning appearance displays a yellow badge for cautionary indicators.
Visual characteristics:
- Yellow background color
- Dark foreground text for readability
BB.Badge(text: "Warning", appearance: .warning)
Danger
The danger appearance displays a red badge for error or critical status indicators.
Visual characteristics:
- Red background color
- Contrasting foreground text
BB.Badge(text: "Danger", appearance: .danger)
Customization
Styling
The BB.Badge component uses predefined appearance styles through the design system's theming infrastructure.
Available styles:
|
Visual Reference |
API |
Description |
|---|---|---|
|
Gray badge |
.neutral |
General-purpose neutral styling |
|
Blue badge |
.info |
Informational content styling |
|
Green badge |
.success |
Positive status styling |
|
Yellow badge |
.warning |
Cautionary status styling |
|
Red badge |
.danger |
Error or critical styling |
Custom styles
To customize badge 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.Badge(text: "New", appearance: .info)
.accessibilityLabel("New item indicator")
.accessibilityHint("This item is new")
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.
|
Token |
API Reference |
Description |
|---|---|---|
|
Typography |
DesignSystem.shared.typography |
Text styling for badge label |
|
Badge Styles |
DesignSystem.shared.styles.badge |
Pre-configured badge appearance styles |
|
Colors |
Theme.colors |
Background and foreground colors per appearance variant |
See also
- BB.Emblem - Icon display component with similar appearance variants
- BB.Chip - Interactive badge-like component with actions