Skip to content

Badge Block – a short value as a colored chip

The badge shows a short value as a chip: rounded, filled with a color, read at a glance. It suits a state, a priority, a category or a count – a value of one or two words whose color says as much as its text.

This page is part of the form block reference.

1. At a glance
Purpose Shows a short value as a chip, optionally with an icon and a caption
Typical use Status, priority, category, number of open items
Related Label Block, Avatar Block, Button Block

2. Settings

Setting Meaning Default
"Content" The text inside the badge. Keep it to one or two words – a badge does not wrap. none
"Label" Optional caption above the badge, styled like the caption of an input none – nothing is drawn above the chip
"Show label" Condition under which the caption is shown shown
"Icon" (Appearance) Icon in front of the text; can follow the value none
"Auto Refresh", "Refresh Interval (s)" Evaluates the badge again on a clock of its own, every given number of seconds off, 30
"Click Action" Action run when the badge is clicked. A badge with one is shown as clickable on hover. Only in forms with an entity. none

The color is not built in: set "Background Color", "Text Color" and "Border Color" from the settings every block has. They color the chip itself, not the space around it.

3. Behaviour

  • Colors computed from the value say what the value means: red for overdue, grey for closed.
  • "Auto Refresh" works as on the Label Block: only this block is evaluated and redrawn. Use it for a value that changes with the clock, such as "overdue" once a due date has passed.
  • Use "Click Action" where the badge stands for something the user would want to open – the record it names, the list it counts – not as a replacement for a button.

4. Example

Status chip. "Content" = the field "Status". "Background Color" = an expression that returns #fee2e2 for "Escalated", #dcfce7 for "Resolved" and #f1f5f9 otherwise; "Text Color" accordingly darker. "Label" = Status, so the badge reads like the captioned inputs beside it.