---
title: "Status Badge"
description: "Displays a status badge"
component: true
---

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

## Usage

---

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

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

## API Reference

---

<ComponentReference mainComponent="StatusBadge" />

## Examples

---

### Grey

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

### Red

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

### Green

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

### Blue

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

### Orange

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

### Purple

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