Badge¶
The Badge widget is a small pill of text. It is the right size for a status such as Paid or Overdue, a count such as 3 new, or a short tag next to a name. Put it inside a table row or a card to label each record at a glance.
See also Alert for a full-width message, Text for plain text, and Progress Bar for a value drawn as a bar.
Using it¶
Drop a Badge into a table row or a list item and set its Text. To show the status of the current record, use a template such as {$record.status}. Pick a Variant if your theme defines looks such as positive or danger.
{$record.status}A badge can also act as a clickable choice. Turn on Selection, give each badge a Key Value, and point them all at the same state path. Clicking a badge then stores its key, and other widgets can react to it. See Page and Portal State.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Text | Any text or template | Badge |
The text in the pill |
| Icon | An icon key | None | An icon shown before the text. The brush button beside it sets the icon's style |
| Enable | On · Off | Off | Under Selection: lets the badge be selected by clicking it |
| Mode | Single · Multiple | Single | Under Selection: whether one badge or several can be selected at once |
| Selection | A state path | — | Under Selection: where the selected value is stored, for example $vars.selectedStatus |
| Key fields | Field names | — | Under Selection: the fields used to tell selected values apart |
| Key Value | Any text or template | — | Under Selection: this badge's own value. Required while selection is on. It is compared with the key field of the value stored at the selection path |
| Variant | Theme variants | Default | Picks the pill's look from the theme. There are no built-in variants. Looks such as positive, warning or danger appear only if your theme defines them. See Variants |
| Custom Style | CSS | Empty | Extra styling for the pill |
| Box Style | Sizing and spacing | — | The box around the pill. Its display and direction settings also lay out any widgets placed inside the badge |
Tips¶
A few things to keep in mind:
- A badge is for a short status next to other content. For a full-width message, use Alert.
- A badge can hold other widgets. They are drawn inline after the text, following the badge's Box Style display and direction.