---
title: Badge
description: Inline label for status, version, or category callouts.
url: https://docs.thally.io/components/badge
---

# Badge

Inline label for status, version, or category callouts.

Use `<Badge>` to highlight status, versions, or categories inline within text or headings.

## Variants

Default{" "}
Success{" "}
Warning{" "}
Danger{" "}
Info

```mdx
<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>
```

## Common patterns

Place badges next to a page heading to show the status of a feature:

{/* An accessible demo heading avoids adding an example to the page TOC. */}
<div role="heading" aria-level={2} className="mb-[1.125rem] mt-9 font-heading text-2xl font-semibold tracking-[-0.025em]">
  Webhooks Beta
</div>

```mdx
<div role="heading" aria-level={2} className="mb-[1.125rem] mt-9 font-heading text-2xl font-semibold tracking-[-0.025em]">
  Webhooks <Badge variant="warning">Beta</Badge>
</div>
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `"default" \| "success" \| "warning" \| "danger" \| "info"` | `"default"` | Color scheme |