Badge Views
DisplayTTBaseUIKit provides three badge components: TTBaseButtonBadge — a button with a notification count overlay; TTBaseBadgeInsetLabel — a label that auto-sizes to fit a count with insets; and TTBaseCircleLabel — a simple circular label for counts.
🔔 TTBaseButtonBadge
An icon button (extends TTBaseUIButton) with a TTBaseBadgeInsetLabel count overlay positioned at the top-right corner.
// Notification bell with badge
let notifBtn = TTBaseButtonBadge(
with: .bell, // AwesomePro icon
iconColor: .white,
badgeBgColor: .systemRed,
textBadgeColor: .white
)
// Update badge count
notifBtn.setBadgeNumber(with: 5) // Shows "5"
notifBtn.setBadgeNumber(with: 0) // Hides badge
notifBtn.setHiddenBadge() // Force hide
// Tap handler (inherited from TTBaseUIButton)
notifBtn.onTouchHandler = { _ in
navigateToNotifications()
}
// In navigation bar
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: notifBtn)
| Method | Description |
|---|---|
setBadgeNumber(with:) | Show badge with count. Hides badge if count ≤ 0. |
setHiddenBadge() | Force hide the badge label |
badgeLabel | Direct access to the TTBaseBadgeInsetLabel |
🏷 TTBaseBadgeInsetLabel
A TTBaseUILabel subclass with UIEdgeInsets padding that auto-sizes to wrap content snugly — ideal for count badges.
// Create standalone badge label
let countBadge = TTBaseBadgeInsetLabel(
withType: .SUB_TITLE,
text: "12",
align: .center
)
countBadge.setBgColor(.systemRed)
countBadge.setTextColor(color: .white)
countBadge.setCorner(withCornerRadius: 10) // Pill shape
// Add as overlay
myView.addSubview(countBadge)
countBadge.setTopAnchor(constant: -4).setTrailingAnchor(constant: -4).done()
⭕ TTBaseCircleLabel
A pre-configured circular label — layer.cornerRadius = frame.height/2. Use by setting a fixed size constraint.
// Circular count display
let circleCount = TTBaseCircleLabel()
circleCount.setWidthAnchor(constant: 24)
circleCount.setHeightAnchor(constant: 24)
circleCount.text = "3"
circleCount.textAlignment = .center
circleCount.backgroundColor = .systemBlue
circleCount.textColor = .white
circleCount.font = .systemFont(ofSize: 12, weight: .bold)
Pro Tip:
TTBaseBadgeInsetLabel is ideal as a floating badge. Combine it with setFullContentHuggingPriority() so it sizes itself to the number — "5" becomes a circle, "100" becomes a pill — without extra constraints.