Badge¶
Displays mapped values with color-coded styling.
Text components · element type badge · binds through text templates
Related: Text · Data Table
Examples¶
// A status from your data
{$data.status}
// A value from a report parameter
{$params.category}Options¶
Configure the badge component with these options:
| Option | Description |
|---|---|
| Value | Expression using text template syntax - can be constant text, data bindings (e.g., {$data.status}), parameters (e.g., {$params.category}), or complex expressions |
| Configure | Set up custom display mappings for different values |
| Show missing values | When enabled, displays the raw value result as text when no mapping matches |
The Configure option allows you to map data values to custom display text and styling:
| Mapping Field | Description |
|---|---|
| Value | The data value to match (e.g., "success", "failure") |
| Text | What text to display for that value (e.g., "Success", "Failed") |
| Class | CSS class for styling (optional) |
| Style | Custom CSS styling (e.g., "color: green") |
Standard text styling options (font, color, size, spacing) are available in the properties panel.
Notes¶
- Choose contrasting text and background colors for better readability
- Badges are commonly used as custom components for reuse across multiple reports
- Frequently used within tables to show status of each row