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.

Usage

tsx

import { StatusBadge } from "@medusajs/ui"

tsx

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