Help

Badge

A component for displaying labels or indicators in a badge style.

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

Badge

Was this example helpful?

Usage#

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

Code
<Badge>Badge</Badge>

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`size`	`"2xsmall"` \|`"xsmall"` \|`"small"` \|`"base"` \|`"large"`	`"base"`
`rounded`	`"base"` \|`"full"`	`"base"`
`color`	`"green"` \|`"red"` \|`"blue"` \|`"orange"` \|`"grey"` \|`"purple"`	`"grey"`

Was this helpful?

GreyRedGreenBlueOrangePurple

Was this example helpful?

2xsmallxsmallsmallbaselarge

Was this example helpful?

Base RoundedFull Rounded

Was this guide helpful?