Badge

A small colour-filled label for counts and tags — 3, NEW, beta — that can also be attached to another widget as a corner overlay (the classic notification dot on a button).

Live preview

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders Badge as a live, theme-aware widget you can interact with.

Example

const inbox = toolbar.Button({ text: 'Inbox' });
inbox.pack.configure({ side: 'left' });

const count = app.Badge({ text: '3', color: 'danger' });
count.attach(inbox); // overlays the NE corner, tracks the button

count.text = '12'; // live updates
count.detach(); // remove the overlay (the badge still exists)

A badge used inline (not attached) is just packed/gridded like any label.

Attaching

badge.attach(target, options?) overlays the badge on a corner of target using Tk's place — which tracks the target's size and position by itself, so nothing is bound onto the target (the one tidy-up hook added on destroy is +-appended and never disturbs existing bindings).

Option Default Meaning
corner 'ne' 'ne', 'nw', 'se' or 'sw'.
dx, dy 0 Pixel nudge from the corner.

Create the badge under an ancestor of the target — app.Badge({…}) works for any target in the main window.

Options

Option Type Description
text string The badge content. Keep it short.
color string primary (default), secondary, success, info, warning, danger, light, dark.
style string Escape hatch: a full ttk style name; overrides color.

Plus the usual label options (font, image, compound, padding, …). Badges are sized by their text; don't put information in colour alone — pair it with the text (see Accessibility).

See also