Badge Block – a short value as a coloured chip¶
The badge shows a short value as a rounded, coloured chip: a state, a count, a category. Its colour carries as much meaning as its text, so it is read at a glance.
This page is part of the widget reference.
1. At a glance¶
| Purpose | Shows one or two words as a chip |
| Typical use | The number of open escalations next to a heading; a system status "Online" |
| Related | Label for a sentence, Card for one large number with a title, Button for something to press |
2. Settings¶
In addition, the widget has the settings every widget has.
| Setting | Meaning | Default |
|---|---|---|
| "Content" | The text inside the badge, computed. Keep it to one or two words – a badge does not wrap. | none |
| "Label" | An optional caption above the badge, in the style of an input caption | none |
| "Show label" | Condition deciding whether the caption is shown | always (when there is a caption) |
| "Icon" | An icon in front of the text, an image expression (category Appearance) | none |
| "Click Action" | An action run when the badge is clicked | none |
A badge needs a "Content", an "Icon" or both.
The colours are not built in: set "Background Color", "Text Color", "Border" and "Border Color" with the settings every widget has. Each can be computed, so the colour can follow the value.
3. Behaviour¶
- With a "Click Action" the badge marks itself as clickable on hover. Without one it is a value the user only reads. Use the click where the badge stands for something the user wants to open – the list it counts – not as a substitute for a button.
- With "Auto Refresh" text, icon and colours are evaluated again.
4. Example¶
Open escalations. "Content": an expression counting the open escalations. "Background Color": the token "Danger (Soft)" when the count is above 0, otherwise "Success (Soft)". "Click Action": an action that opens the query "Open escalations". "Auto Refresh" on, 60 seconds.