# Badge

> A small label for status or metadata.

**URL:** https://inference.sh/docs/agents/widgets/badge
**Last updated:** 2026-09-18

---

A small label for status or metadata.

## Preview

```
[✓] [pending] [error]
```

## Usage

```go
node := models.WidgetNode{
    Type:    models.WidgetNodeTypeBadge,
    Label:   "success",
    Variant: "secondary",
}
```

## Props

| Name | Type | Description | Default |
|------|------|-------------|---------|
| `type` | `"badge"` | Node type | required |
| `label` | `string` | Badge text content | required |
| `variant` | `string` | Visual style variant | `"default"` |

### Variants

| Variant | Description | Use Case |
|---------|-------------|----------|
| `default` | Primary/prominent style | Active items, current status |
| `secondary` | Subdued style | Completed items, secondary info |
| `outline` | Border only, minimal | Pending items, neutral status |
| `destructive` | Error/danger style | Errors, failed states |

## Examples

### Status Indicators

```go
// Completed
{Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"}

// In Progress
{Type: models.WidgetNodeTypeBadge, Label: "●", Variant: "default"}

// Pending
{Type: models.WidgetNodeTypeBadge, Label: "○", Variant: "outline"}

// Failed
{Type: models.WidgetNodeTypeBadge, Label: "✗", Variant: "destructive"}
```

### Text Labels

```go
{Type: models.WidgetNodeTypeBadge, Label: "new", Variant: "default"}
{Type: models.WidgetNodeTypeBadge, Label: "beta", Variant: "secondary"}
{Type: models.WidgetNodeTypeBadge, Label: "deprecated", Variant: "outline"}
```

### With Text Content

Combine with text in a row:

```go
{
    Type: models.WidgetNodeTypeRow,
    Gap:  2,
    Children: []models.WidgetNode{
        {Type: models.WidgetNodeTypeBadge, Label: "✓", Variant: "secondary"},
        {Type: models.WidgetNodeTypeText, Value: "Task completed"},
    },
}
```

## TypeScript

```typescript
const node: WidgetNode = {
  type: "badge",
  label: "new",
  variant: "default",
}
```

## Best Practices

1. **Keep labels short** - 1-2 characters for icons, 1-2 words for text
2. **Use semantic variants** - Match variant to meaning (destructive for errors)
3. **Combine with Row** - Place badges inline with text content
4. **Lowercase text** - Badge labels are automatically lowercased in the UI