# Badge (/docs/products/dash-dots/reference/components/badge)

Keep it to a word or two, like "Paid" or "Pending".

**Children:** Text, which can include `Text`, `Link` and `Icon` within a line

## Example

![The Badge component](/assets/images/dash-dots/components/badge.webp)

```xml title="view.dml"
<View direction="row" gap="small">
  <Badge tone="success">Paid</Badge>
  <Badge tone="warning">Pending</Badge>
  <Badge tone="danger">Failed</Badge>
</View>
```

## Props

| Prop   | Type                                                                      | What it is          |
| ------ | ------------------------------------------------------------------------- | ------------------- |
| `tone` | [status tone](/docs/products/dash-dots/reference/components#status-tones) | Default: `default`. |

## Events

None.