> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Compact label with variants and optional icons

# Badge

`Badge` renders a compact status label. It supports text icons and Iconify icon specs.

```lua theme={"dark"}
ui.badge('Ready', {
  iconComponent = 'lucide:check',
  variant = 'secondary'
})
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.badge(label, props?)
  ```

  ```lua Declarative theme={"dark"}
  lui.badge(label, props?)
  ```
</CodeGroup>

## Props

| Prop                                                       | Type                                                     | Description                                          |
| ---------------------------------------------------------- | -------------------------------------------------------- | ---------------------------------------------------- |
| `label`                                                    | `string \| reactive getter`                              | Badge text. Passed as the first argument.            |
| `value`                                                    | `string`                                                 | Fallback label if `label` is missing.                |
| `variant`                                                  | `'default' \| 'secondary' \| 'outline' \| 'destructive'` | Visual variant.                                      |
| `icon`, `iconComponent`, `startIcon`, `startIconComponent` | icon                                                     | Leading icon.                                        |
| `endIcon`, `endIconComponent`                              | icon                                                     | Trailing icon.                                       |
| `iconPosition`                                             | `'start' \| 'end'`                                       | Moves the primary icon to the end when set to `end`. |
| `labelClassName`                                           | `string`                                                 | Label span class.                                    |
| `iconClassName`, `startIconClassName`, `endIconClassName`  | `string`                                                 | Icon slot classes.                                   |