Badge¶
The Badge component displays mapped values with color-coded styling. Use it to transform raw data into visual status indicators and category labels with distinct colors for quick identification.
Configuration¶
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.
Use Cases¶
Status Mapping: Configure value mappings for status indicators:
| Value | Text | Style |
|---|---|---|
success |
Success | color: green |
failure |
Failed | color: red |
Category Listing: Display product categories with distinct styling:
| Value | Text | Style |
|---|---|---|
electronics |
Electronics | background: blue; color: white |
clothing |
Clothing | background: purple; color: white |
Tips¶
- 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