Badge

Interactive documentation for Badge and BadgeGroup components. Change props in the playground, inspect color variants, and copy generated examples.

Preview

Badge

BadgeSaleNew

Badge Code

<Badge
  name="Badge"
/>

BadgeGroup Code

const badges: BadgeProps[] = [
  { name: 'Badge', color: 'midnight' },
  { name: 'Sale', color: 'watermelon' },
  { name: 'New', color: 'amber' },
];

<BadgeGroup :badges="badges" />

Colors

Available badge color variants.

midnightwatermelonamberbluebasilfuchsia

Groups

BadgeGroup examples with one, two, and three badges.

Single badge

Badge

Two badges

SaleNew

Three badges

New ColoursStaff PickBeautiful

Props

These tables match the current BadgeProps and BadgeGroup props interfaces.

Badge

Single badge component used for labels, statuses, and highlights.

Prop	Type	Default	Required	Description
name	string	undefined	Required	Badge text content.
color	Color	'midnight'	Optional	Controls border, background, and text color.

BadgeGroup

Layout wrapper for rendering multiple badges in a horizontal group.

Prop	Type	Default	Required	Description
badges	BadgeProps[]	[]	Required	Array of badges rendered inside the group.