Badge

Compact label for status, categories, or counts. Supports theme option colors, an optional icon, and a dot-only mode for minimal status indicators.

import { Badge } from 'phoundry-ui';

Variants

Gray Blue Green Yellow Red Cyan

<Badge>Gray</Badge>
<Badge color="blue">Blue</Badge>
<Badge color="green">Green</Badge>
<Badge color="yellow">Yellow</Badge>
<Badge color="red">Red</Badge>
<Badge color="cyan">Cyan</Badge>

Sizes

lg increases label typography; combine with icon for dense toolbar badges.

Small Medium Large

<Badge size="sm" color="blue">Small</Badge>
<Badge size="md" color="blue">Medium</Badge>
<Badge size="lg" color="blue">Large</Badge>

With Icon

Featured Verified Caution

<Badge icon={PhiIcons.edit} color="blue">Featured</Badge>
<Badge icon={PhiIcons.check} color="green">Verified</Badge>
<Badge icon={PhiIcons.warning} color="yellow">Caution</Badge>

Icon Only

When there are no children, the badge shrinks to a square chip sized by size.

<Badge icon={PhiIcons.info} color="blue" />
<Badge icon={PhiIcons.check} color="green" />
<Badge icon={PhiIcons.warning} color="yellow" />
<Badge icon={PhiIcons.cancel} color="red" />

Dot Mode

Online

Away

Busy

Offline

<Badge color="green" dot />
<Badge color="yellow" dot />
<Badge color="red" dot />
<Badge dot />

Props

Prop	Type	Default	Description
color	'red' \| 'orange' \| 'yellow' \| 'green' \| 'cyan' \| 'blue' \| 'purple' \| 'pink' \| 'gray'	'gray'	Theme option color.
size	'sm' \| 'md' \| 'lg'	'sm'	Badge size - typography recalibrated for toolbar rows using the Button control scale.
icon	string	-	Iconify icon string shown before the label.
dot	boolean	false	Render as a small colored dot instead of a label.
class	string	-	Additional CSS classes.
children	Snippet	-	Badge label content.

Usage tips

Use dot mode for compact status indicators next to labels or avatars.
In dot mode, only color and size apply - children and icon are ignored.
The icon prop accepts any Iconify string (or PhiIcons entries) and scales with size.
Combine badges with other components - e.g. inside table cells, card headers, or list items.