Photonix

Badge

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

Preview

Beta
Usage
"use client";

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

export default function BadgePreviewExample() {
    return <Badge variant="primary" color="blue" label="Beta" />;
}

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
"use client";

import { Badge, Flex } from '@photonix/ultimate';

export default function BadgeColorsExample() {
    return (
        <Flex gap="sm" wrap="wrap">
            <Badge color="gray" label="gray" />
            <Badge color="black" label="black" />
            <Badge color="white" label="white" />
            <Badge color="red" label="red" />
            <Badge color="orange" label="orange" />
            <Badge color="yellow" label="yellow" />
            <Badge color="green" label="green" />
            <Badge color="mint" label="mint" />
            <Badge color="teal" label="teal" />
            <Badge color="cyan" label="cyan" />
            <Badge color="blue" label="blue" />
            <Badge color="indigo" label="indigo" />
            <Badge color="purple" label="purple" />
            <Badge color="pink" label="pink" />
            <Badge color="brown" label="brown" />
        </Flex>
    );
}

Badge Variants

Badge variants include visual style, color, and shape props in the canonical source.

PrimarySecondaryRounded
Badge Variants
"use client";

import { Badge, Flex } from '@photonix/ultimate';

export default function BadgeVariantsExample() {
    return (
        <Flex gap="sm" wrap align="center">
            <Badge variant="primary" color="blue" label="Primary" />
            <Badge variant="secondary" color="green" label="Secondary" />
            <Badge variant="primary" color="red" shape="rounded" label="Rounded" />
            <Badge variant="primary" color="purple" shape="dot" />
        </Flex>
    );
}

Shapes & Content

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

PillRounded5
Shapes & Content
"use client";

import { Badge, Flex } from '@photonix/ultimate';
import { StarFilled } from '@photonix/icons';

export default function BadgeShapesExample() {
    return (
        <Flex gap="md" align="center" justify="center" wrap="wrap">
            <Badge shape="pill" label="Pill" />
            <Badge shape="rounded" label="Rounded" />
            <Badge shape="icon" icon={<StarFilled size={12} />} aria-label="Star" />
            <Badge shape="dot" color="green" aria-label="Online" />
            <Badge count={5} color="red" />
        </Flex>
    );
}

Stroke

Add a stroke to separate the badge from the background.

With StrokeNo Stroke
Stroke
"use client";

import { Badge, Flex } from '@photonix/ultimate';

export default function BadgeStrokeExample() {
    return (
        <Flex gap="md" p="sm" borderRadius="2xs" style={{ background: 'var(--color-overlay)' }}>
            <Badge stroke color="blue" label="With Stroke" />
            <Badge color="blue" label="No Stroke" />
        </Flex>
    );
}

On this page

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