import { ComponentExample } from "@/components/ComponentExample"
import { ComponentReference } from "@/components/ComponentReference"

export const metadata = {
  title: `Status Badge`,
}

# {metadata.title}

A component that displays the status of an item in a badge style. It's useful to indicate states like "Active", "Published", or "Draft".

In this guide, you'll learn how to use the Status Badge component.

<ComponentExample name="status-badge-demo" />

## Usage

```tsx
import { StatusBadge } from "@medusajs/ui"
```

```tsx
<StatusBadge color="green">Active</StatusBadge>
```

---

## API Reference

<ComponentReference mainComponent="StatusBadge" />

---

## Examples

### Status Badge Colors

<ComponentExample name="status-badge-all-colors" hideFeedback />