Badge Views

Display

TTBaseUIKit 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)
MethodDescription
setBadgeNumber(with:)Show badge with count. Hides badge if count ≤ 0.
setHiddenBadge()Force hide the badge label
badgeLabelDirect 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.