Available from v1.4.1

NotificationBadge

NotificationBadge is a chip view that indicates new items or items needing attention.

Platform availability: iOS 17.0+

When to use:

• Use NotificationBadge to display notification counts, status indicators, or attention markers.
• Consider alternative approaches for complex status information that requires more than a simple count or label.

It includes the following features:

• Counter display with optional maximum count limit.
• Text content for custom labels.
• Automatic visibility handling based on content state.
• Configurable corner radius styling.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

NotificationBadge

Properties

Initializers

Content Enum

Configuration

content

The content property controls what is displayed in the notification badge.

                                                        
                                                        
                                                            // Set counter content
                                                        badge.content = .counter(42)
                                                        
                                                        // Set text content
                                                        badge.content = .text("Alert")
                                                        
                                                        // Hide badge
                                                        badge.content = .empty
                                                        
                                                            

cornerRadius

The cornerRadius property defines the corner radius of the badge view.

                                                        
                                                        
                                                            // Different corner radius options
                                                        badge.cornerRadius = .none
                                                        badge.cornerRadius = .small(roundedCorners: .allCorners)
                                                        badge.cornerRadius = .medium(roundedCorners: .allCorners)
                                                        badge.cornerRadius = .large(roundedCorners: .allCorners)
                                                        badge.cornerRadius = .max(roundedCorners: .allCorners)
                                                        
                                                            

maxCount

The maxCount property sets the maximum number displayed. When the counter exceeds this value, a "+" sign is shown.

                                                        
                                                        
                                                            // Set maximum count
                                                        badge.maxCount = 99
                                                        badge.content = .counter(150) // Displays "99+"
                                                        
                                                        // Remove maximum count limit
                                                        badge.maxCount = nil
                                                        badge.content = .counter(150) // Displays "150"
                                                        
                                                            

Usage

Basic usage

Create a NotificationBadge instance with content.

                                                        
                                                        
                                                            // Empty badge (hidden by default)
                                                        let emptyBadge = NotificationBadge()
                                                        
                                                        // Badge with counter
                                                        let counterBadge = NotificationBadge(content: .counter(5))
                                                        
                                                        // Badge with text
                                                        let textBadge = NotificationBadge(content: .text("New"))
                                                        
                                                            

Advanced usage

                                                        
                                                        
                                                            // Badge with counter and max count limit
                                                        let limitedBadge = NotificationBadge(content: .counter(150), maxCount: 99)
                                                        
                                                        // Badge with custom styling
                                                        let customStyle: Style<NotificationBadge> = { badge in
                                                            badge.backgroundColor = .systemRed
                                                            badge.cornerRadius = .medium(roundedCorners: .allCorners)
                                                        }
                                                        let styledBadge = NotificationBadge(content: .counter(10), style: customStyle)
                                                        
                                                            

Updating badge content dynamically

                                                        
                                                        
                                                            class NotificationViewController: UIViewController {
                                                            private let badge = NotificationBadge()
                                                            
                                                            override func viewDidLoad() {
                                                                super.viewDidLoad()
                                                                setupBadge()
                                                            }
                                                            
                                                            private func setupBadge() {
                                                                view.addSubview(badge)
                                                                badge.translatesAutoresizingMaskIntoConstraints = false
                                                                
                                                                NSLayoutConstraint.activate([
                                                                    badge.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
                                                                    badge.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
                                                                ])
                                                            }
                                                            
                                                            func updateNotificationCount(_ count: Int) {
                                                                badge.content = count > 0 ? .counter(count) : .empty
                                                                badge.maxCount = 99
                                                            }
                                                        }
                                                        
                                                            

With all parameters

                                                        
                                                        
                                                            let badge = NotificationBadge(
                                                            content: .counter(25),
                                                            maxCount: 99,
                                                            style: DesignSystem.shared.styles.notificationBadge
                                                        )
                                                        
                                                            

Customization

Styling

Custom styling

                                                        
                                                        
                                                            let customStyle: Style<NotificationBadge> = { badge in
                                                            badge.backgroundColor = .systemRed
                                                            badge.cornerRadius = .medium(roundedCorners: .allCorners)
                                                        }
                                                        
                                                        let badge = NotificationBadge(content: .counter(5), style: customStyle)
                                                        
                                                            

Accessibility

This 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

Best practices

• The badge automatically hides when content is .empty to improve accessibility.
• Counter values are automatically formatted according to the device locale.
• When maxCount is set and exceeded, the badge displays the max count with a "+" symbol.
• The badge uses appropriate text styling for optimal readability.

                                                        
                                                        
                                                            // Accessibility is automatically handled based on content
                                                        let badge = NotificationBadge(content: .counter(5))
                                                        // Badge is visible and accessible
                                                        
                                                        badge.content = .empty
                                                        // Badge is automatically hidden from accessibility
                                                        
                                                            

Dependencies

• External dependencies: None
• Internal dependencies: Theme.colors, DesignSystem.shared.fonts

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.