Help

Status Badge

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.

Draft

Was this example helpful?

Usage#

Code
import { StatusBadge } from "@medusajs/ui"

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

This component is based on the span element and supports all of its props

Prop	Type	Default
`color`	`"green"` \|`"red"` \|`"blue"` \|`"orange"` \|`"grey"` \|`"purple"`	`"grey"`

Was this helpful?

Active

Error

Pending

Info

Archived

Draft

Was this guide helpful?