Badge

A small label or tag indicator, typically used to show statuses, categories, or counts. Renders as an inline element.

Properties

Property	Type	Default	Description
label	text	'Badge'	The badge text. Supports expressions.

Example

Show a status badge:

Label: `{ {row.status}}`

Display a category tag:

Label: `{ {row.category_name}}`

Tips

• Use the Design tab to set background color, text color, padding, and border-radius for a pill or tag appearance.
• Combine with expressions to show dynamic statuses: { {upper(row.status)}}.
• Use conditional styling with element states or visibility to change badge colors based on status values.
• Place multiple badges in a Container with display: flex and gap for a tag list layout.