A notification badge is capable of displaying a badged number, indicating the number of notifications or action items requiring user attention.
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+
.
The Notification Center Badge component behaves the same on all platforms currently.
Available as part of the notificationcenter-ios module maintained by Customer Technology Front-end Platform Engineering
NotificationBadgeButton — AmericanUICore
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" />