Count badge

In plain words

A little round number, like the count of unread messages on an app icon.

A round counter for notifications or problems. Above max it shows 99+.

ui.count_badge · Category: Feedback · Full reference →

Preview

Code

pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")

When to use

• Next to an icon or tab to show how many unread items or errors there are.
• For text statuses use a Badge.

Usage

import pyzed as pz
from pyzed import ui

pz.row([
    ui.count_badge(3),
    ui.count_badge(42, tint="success"),
    ui.count_badge(120, tint="error"),
    pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center"),
], spacing=16, align="center")

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Count

Above max it shows max+.

3

Code

ui.count_badge(3)

42

Code

ui.count_badge(42)

120

Code

ui.count_badge(120)

max=9

Code

ui.count_badge(12, max=9)

Tint

tint="success"

Code

ui.count_badge(5, tint="success")

tint="warning"

Code

ui.count_badge(5, tint="warning")

tint="error"

Code

ui.count_badge(5, tint="error")

Next to an icon

Notifications

Code

pz.row([ui.icon_button("bell", on_press), ui.count_badge(7)], spacing=2, align="center")

States and events

With show_zero=False it draws nothing at 0 but keeps its place in the layout.

show_zero=False

Code

pz.row([ui.icon_button("bell", on_press), ui.count_badge(0, show_zero=False)], align="center")

Events

Count badge has no events of its own: it shows what you give it. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Properties and API

ui.count_badge

count_badge(count, *, tint='accent', max=99, show_zero=True, theme=None)

A round counter (notifications, problems…). Shows 99+ above max.

Property	Default	Description
count	required	The number.
tint	"accent"	Semantic color: "accent", "error", "warning", "success", "info" or a token.
max	99	Maximum before showing N+.
show_zero	True	With False, a count of 0 draws nothing.
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Full reference →

Related

BadgeA small pill for statuses, versions and counters.

IndicatorA colored dot for status, presence or unsaved changes.

Status barThe bottom bar: diagnostics, cursor position, language.