The Badge block renders a small status label. Use it for tags, statuses, or categories inside your view.

<img
  src="https://res.cloudinary.com/zimple/image/upload/c_crop,w_1024,h_130,x_0,y_0/f_auto,q_auto/v1777456904/interface-docs/badge-render.png"
  alt="Six Badge blocks rendered in two rows of three: Default (blue), Success (green) and Warning (yellow) on the top row; Destructive (red), Info (light blue) and Outline (white with a thin border) on the bottom row."
  width="1024"
  height="130"
  loading="lazy"
/>

## Settings

| Setting | Description |
|---|---|
| **Variant** | The badge's color style. Pick from the list below. In Data mode, bind the variant name to data. |
| **Text** | The badge's label. Supports the Data Picker. |

### Variant modes

The Variant field has two tabs:

- **Select** -- pick a specific variant from a dropdown.
- **Data** -- bind the variant name to data via the Data Picker. The resolved value must match one of the variant identifiers below; anything else falls back to the default style.

### Variants

| Display label | Identifier (Data mode) |
|---|---|
| **Default** | `default` |
| **Destructive** | `destructive` |
| **Info** | `info` |
| **Success** | `success` |
| **Warning** | `warning` |
| **Secondary** | `secondary` |
| **Outline** | `outline` |
| **Pink** | `pink` |
| **Violet** | `violet` |
| **Light Blue** | `lightBlue` |
| **Disabled** | `disabled` |

## Style and Visibility

The Badge block uses variant-based styling, so the **Style** sub-tab does not apply -- it shows an info message that custom block styles are not applied to badge components. The standard **Visibility** sub-tab works the same as for every other block. See [Conditional Visibility](/docs/buttons/interface-button/interface-builder/how-to/visibility/conditional-visibility).