Photonix

Badge

Displays a badge or a component that looks like a badge.

Preview

Badge
Usage
import { Badge } from '@photonix/ultimate';

<Badge variant="primary" color="blue" label="Badge" />

Component API

Badge

Prop
Type
Default
Description
variant
"primary" | "secondary"
'primary'
Visual style of the badge - primary: Filled background (Solid) - secondary: Light background (Subtle)
color
"gray" | "black" | "white" | "red" | "orange" | "yellow" | "green" | "mint" | "teal" | "cyan" | "blue" | "indigo" | "purple" | "pink" | "brown"
'gray'
Color theme of the badge
shape
"rounded" | "pill" | "icon" | "text" | "dot"
'pill'
Shape of the badge - rounded: Small border radius (6px) - pill: Fully rounded (capsule) - DEFAULT - icon: Circle shape with icon only - text: Pill shape with text only - dot: Small dot status indicator (8px)
icon
React.ReactNode
-
Icon to display (for rounded, pill, icon shapes)
label
string
-
Text label (for rounded, pill, text shapes)
count
number
-
Numeric count (alternative to label)
stroke
boolean
false
Show 2px stroke around badge (useful for overlapping effects) Creates visual separation when badge overlaps other elements
forceTheme
"Light" | "Dark"
-
Force a specific theme's color tokens Useful when component needs to use Light theme tokens regardless of current theme

Variants

Colors

Badges support a comprehensive color palette.

grayblackwhiteredorangeyellowgreenminttealcyanblueindigopurplepinkbrown
Colors
<Badge color="gray" label="gray" />
<Badge color="black" label="black" />
/* ... more colors ... */
<Badge color="brown" label="brown" />

Variants

Choose between solid ('primary') and subtle ('secondary') styles.

PrimarySecondary
Variants
<Badge variant="primary" label="Primary" />
<Badge variant="secondary" label="Secondary" />

Shapes & Content

Different shapes for text, icons, dots, or numeric counts.

PillRounded5
Shapes & Content
<Badge shape="pill" label="Pill" />
<Badge shape="rounded" label="Rounded" />
<Badge shape="icon" icon={<StarFilled size={12} />} />
<Badge shape="dot" color="green" />
<Badge count={5} color="red" />

Stroke

Add a stroke to separate the badge from the background.

With StrokeNo Stroke
Stroke
<Box style={{ background: '#333', padding: '8px' }}>
  <Badge stroke color="blue" label="Stroke" />
</Box>

On this page

Preview
Component API
Variants
Colors
Variants
Shapes & Icons
Photonix UI - React Components, Templates & Figma Design System