Badge

Get started with the basics of using the Badge component.

experimental

---
import Badge from '@/components/Badge.astro';
---

<Badge>Badge</Badge>

Variants

Rocketship Badge components come with different variants. You can customize the components by changing the variant.

variant	description	example	code
solid	Solid Badge	Badge	`<Badge variant="solid">Badge</Badge>`
outline	Outline Badge	Badge	`<Badge variant="outline">Badge</Badge>`
soft	Soft Badge	Badge	`<Badge variant="soft">Badge</Badge>`
ghost	Ghost Badge	Badge	`<Badge variant="ghost">Badge</Badge>`
surface	Surface Badge	Badge	`<Badge variant="surface">Badge</Badge>`

Rocketship components use a numeric scale for sizes, corresponding to specific text styles. You can customize the Badge by changing the size.

size	description	example	code
1	Tiny Badge	Badge	`<Badge size="1">Badge</Badge>`
3	Small Badge	Badge	`<Badge size="3">Badge</Badge>`
5	Medium Badge	Badge	`<Badge size="5">Badge</Badge>`

Note: Sizes 2, 4, 6, and 8 are also available for more fine-grained control.

Rocketship Badge components come with different radius options. You can customize the components by changing the radius.

radius	description	example	code
sm	Small Radius	Badge	`<Badge radius="sm">Badge</Badge>`
md	Medium Radius	Badge	`<Badge radius="md">Badge</Badge>`
lg	Large Radius	Badge	`<Badge radius="lg">Badge</Badge>`
full	Full Radius	Badge	`<Badge radius="full">Badge</Badge>`

Rocketship Badge components come with different colors based on the Radix color system. You can customize the components by changing the color.

color	description	example	code
indigo	Indigo Color	Badge	`<Badge color="indigo">Badge</Badge>`
blue	Blue Color	Badge	`<Badge color="blue">Badge</Badge>`
cyan	Cyan Color	Badge	`<Badge color="cyan">Badge</Badge>`
teal	Teal Color	Badge	`<Badge color="teal">Badge</Badge>`
green	Green	Badge	`<Badge color="green">Badge</Badge>`
red	Red	Badge	`<Badge color="red">Badge</Badge>`
tomato	Tomato	Badge	`<Badge color="tomato">Badge</Badge>`
orange	Orange Color	Badge	`<Badge color="orange">Badge</Badge>`
purple	Purple Color	Badge	`<Badge color="purple">Badge</Badge>`
pink	Pink Color	Badge	`<Badge color="pink">Badge</Badge>`
gray	Neutral Color	Badge	`<Badge color="gray">Badge</Badge>`

You can combine different properties to create custom badges:

<Badge size="3" color="cyan" variant="outline" radius="full">
  Custom Badge
</Badge>

This will create a small, cyan-colored outline badge with fully rounded corners.

Custom Badge