Page

Variant

Demonstrates the full palette of badge color variants.

redBadge
red with iconBadge
red icon only
orangeBadge
orange with iconBadge
orange icon only
amberBadge
amber with iconBadge
amber icon only
yellowBadge
yellow with iconBadge
yellow icon only
limeBadge
lime with iconBadge
lime icon only
greenBadge
green with iconBadge
green icon only
emeraldBadge
emerald with iconBadge
emerald icon only
tealBadge
teal with iconBadge
teal icon only
cyanBadge
cyan with iconBadge
cyan icon only
skyBadge
sky with iconBadge
sky icon only
blueBadge
blue with iconBadge
blue icon only
indigoBadge
indigo with iconBadge
indigo icon only
violetBadge
violet with iconBadge
violet icon only
purpleBadge
purple with iconBadge
purple icon only
fuchsiaBadge
fuchsia with iconBadge
fuchsia icon only
pinkBadge
pink with iconBadge
pink icon only
roseBadge
rose with iconBadge
rose icon only
grayBadge
gray with iconBadge
gray icon only

Size

Displays badge size options (small, base, and large) with and without icons.

smBadge
sm with iconBadge
sm icon only
baseBadge
base with iconBadge
base icon only
lgBadge
lg with iconBadge
lg icon only

Badge Button Variant

Interactive badge buttons in all color variants with text, icon, and icon-only options.

red
red with icon
red icon only
orange
orange with icon
orange icon only
amber
amber with icon
amber icon only
yellow
yellow with icon
yellow icon only
lime
lime with icon
lime icon only
green
green with icon
green icon only
emerald
emerald with icon
emerald icon only
teal
teal with icon
teal icon only
cyan
cyan with icon
cyan icon only
sky
sky with icon
sky icon only
blue
blue with icon
blue icon only
indigo
indigo with icon
indigo icon only
violet
violet with icon
violet icon only
purple
purple with icon
purple icon only
fuchsia
fuchsia with icon
fuchsia icon only
pink
pink with icon
pink icon only
rose
rose with icon
rose icon only
gray
gray with icon
gray icon only

Badge Button with Render Prop

Using render prop pattern to render BadgeButton as different elements like Link.

linkDocumentation
external linkGitHub
button (default)