Notification Center - Badge

A notification badge is capable of displaying a badged number, indicating the number of notifications or action items requiring user attention.

Usage

Users do not want to be inundated with things demanding immediate attention, so the number of notification buttons should kept to a minimum (e.g., a single notification button on the home screen).

If there are no notifications, the badge will not display. If the number of notifications exceeds 999, the badge icon will display 999+.

iOS Specific Behavior

The Notification Center Badge component behaves the same on all platforms currently.

Availability

Available as part of the notificationcenter-ios module maintained by Customer Technology Front-end Platform Engineering

Technical Details

Class and Module

NotificationBadgeButton — AmericanUICore

Example Code

var notificationBadgeButton : NotificationBadgeButton?

override public func viewDidLoad() {
    notificationBadgeButton = NotificationBadgeButton(frame: CGRect.zero)
    notificationBadgeButton?.setBackgroundImage(UIImage(named: "notification-bell"), for: .normal)
    if let notificationBadgeButton = notificationBadgeButton {
        self.view.addSubview(notificationBadgeButton)
    }
}

public func updateBadgeNumber(_ badgeNumber: Int) {
    notificationBadgeButton?.badgeNumber = badgeNumber
}
<h3>Default State:</h3>
<img src="../../app-component-images/ios/notification-badge.png" alt="iOS Notification Badge in Default State" />
<h3>Active State (Unread Notifications):</h3>
<img src="../../app-component-images/ios/notification-badge.png" alt="iOS Notification Badge in Highlighted State" />
  • Handle: @notificationbadge-ios
  • Preview:
  • Filesystem Path: components/app/ios/notificationcenter-ios/notificationbadge-ios/notificationbadge-ios.hbs