Available from v8.0.0
BB.NotificationBadge
BB.NotificationBadge is a SwiftUI component that renders a compact badge with text or counter content.
Platform availability: iOS 17.0+
- Supports counter, text, and empty content types.
- Supports optional max-count formatting such as 99+.
- Supports configurable corner radius via DesignSystem.CornerRadiusTypes.
When to use:
- Use BB.NotificationBadge for small status markers near icons, tabs, or list items.
- Use counter content for unread counts and text content for short labels.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
|
|
|
|
|
|
API reference
BB.NotificationBadge
Initializers
init(content:maxCount:cornerRadius:)
Creates a notification badge.
|
Parameter |
Type |
Description |
|---|---|---|
|
content |
BB.NotificationBadge.Content |
Content to render in the badge |
|
maxCount |
Int? |
Maximum count before showing a trailing plus sign |
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
Corner radius style for the badge |
Nested types
Content
Defines the content displayed in the badge.
|
Case |
Description |
|---|---|
|
counter(Int) |
Numeric counter value |
|
empty |
No visible badge content |
|
text(String) |
Text content |
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
content |
BB.NotificationBadge.Content |
.empty |
|
cornerRadius |
DesignSystem.CornerRadiusTypes |
.max(roundedCorners: .allCorners) |
|
maxCount |
Int? |
nil |
content
The content property defines what the badge renders. Use .counter(Int) for numeric values, .text(String) for labels, or .empty for no content.
BB.NotificationBadge(content: .text("New"))
cornerRadius
The cornerRadius property sets the badge background shape using design system corner radius types.
BB.NotificationBadge(content: .counter(7), cornerRadius: .small())
maxCount
The maxCount property sets the counter threshold for trailing-plus formatting. When the counter value exceeds maxCount, the badge displays the max value followed by a +.
BB.NotificationBadge(content: .counter(120), maxCount: 99)
// Displays: "99+"
Usage
Basic usage
Use a counter badge with default styling.
import SwiftUI
import BackbaseDesignSystem
BB.NotificationBadge(content: .counter(4))
Common use cases
Text badge
Use text content for short state labels.
BB.NotificationBadge(content: .text("New"))
Capped counter
Use max count when large numbers should stay compact.
BB.NotificationBadge(content: .counter(120), maxCount: 99)
Custom corner radius
Apply different corner radius styles.
BB.NotificationBadge(content: .counter(5), cornerRadius: .small())
BB.NotificationBadge(content: .text("Hot"), cornerRadius: .medium())
States and variants
Counter
This state occurs when content is .counter(Int).
Visual characteristics:
- Numeric text inside badge shape
- Optional trailing plus when maxCount applies
BB.NotificationBadge(content: .counter(8))
Text
This state occurs when content is .text(String).
Visual characteristics:
- Text label inside badge shape
- Width adapts to text length
BB.NotificationBadge(content: .text("New"))
Empty
This state occurs when content is .empty.
Visual characteristics:
- No visible badge content (renders EmptyView)
BB.NotificationBadge(content: .empty)
Customization
Styling
|
API |
Description |
|---|---|
|
cornerRadius: .max(roundedCorners: .allCorners) |
Capsule-like rounded badge (default) |
|
cornerRadius: .small() |
Smaller corner radius style |
|
cornerRadius: .medium() |
Medium corner radius style |
Custom styles
Use cornerRadius with the design system corner radius types for custom shapes.
BB.NotificationBadge(content: .counter(12), cornerRadius: .medium())
BB.NotificationBadge(content: .text("Sale"), cornerRadius: .custom(value: 4))
Error handling
BB.NotificationBadge does not throw errors in its public API.
Events
This component does not expose callback events.
Accessibility
This component can be configured with accessibility features at the integration level. Use standard SwiftUI accessibility modifiers.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the label text for assistive technologies |
|
.accessibilityHint(_:) |
Sets contextual hint text |
|
.accessibilityValue(_:) |
Sets the dynamic badge value description |
Best practices
- Provide meaningful accessibility labels that describe the badge's purpose.
- Use accessibility values to communicate the current count or status.
- Ensure the badge context is clear to screen reader users.
BB.NotificationBadge(content: .counter(4))
.accessibilityLabel("Notifications")
.accessibilityValue("4 unread")
Dependencies
- External dependencies:
- None: No third-party package dependency for the public API.
- Framework requirements: SwiftUI, UIKit.
- Internal dependencies:
- BackbaseDesignSystem: Theme colors, typography, and corner radius types.
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 NotificationBadge:
- color/notification-badge: Background and foreground colors
NotificationBadge tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Background |
theme.color.notification-badge.default.background |
{theme.color.background.danger} |
|
Foreground |
theme.color.notification-badge.default.foreground |
{theme.color.on-background.danger} |
|
Corner Radius |
theme.radius.notification-badge.default |
{theme.radius.button.default} |
|
Padding X |
theme.padding-x.notification-badge.default |
{theme.padding-x.button.sm} |
|
Padding Y |
theme.padding-y.notification-badge.default |
{theme.padding-y.button.sm} |
Semantic tokens
These tokens are accessed via the public DesignSystem.shared API.
|
Token |
API Reference |
Description |
|---|---|---|
|
Colors |
Theme.colors.background.danger |
Badge background color |
|
Colors |
Theme.colors.onBackground.danger |
Badge text color |
|
Typography |
DesignSystem.shared.fonts.preferredFont(.caption1, .regular) |
Badge text font |
Localization
No public localization keys are exposed for this component.
Known limitations
- maxCount affects only .counter content; it has no effect on .text content.
- .empty content renders no visible badge.
- Badge width automatically adapts to content length.
See also
- BB.Badge - General badge component with appearance variants
- BB.IconButton - Action button often paired with badges