Badge

Compact label for status, categories, or counts. Supports semantic color variants, optional icon, and a dot-only mode for minimal status indicators.

import { Badge } from 'phoundry-ui';

Variants

Default Primary Success Warning Error Info

Show code

<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>

Sizes

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

Small Medium Large

Show code

<Badge size="sm" variant="primary">Small</Badge>
<Badge size="md" variant="primary">Medium</Badge>
<Badge size="lg" variant="primary">Large</Badge>

With Icon

Featured Verified Caution

Show code

<Badge icon={PhiIcons.edit} variant="primary">Featured</Badge>
<Badge icon={PhiIcons.check} variant="success">Verified</Badge>
<Badge icon={PhiIcons.warning} variant="warning">Caution</Badge>

Icon Only

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

Show code

<Badge icon={PhiIcons.info} variant="primary" />
<Badge icon={PhiIcons.check} variant="success" />
<Badge icon={PhiIcons.warning} variant="warning" />
<Badge icon={PhiIcons.cancel} variant="error" />

Dot Mode

Online

Away

Busy

Offline

Show code

<Badge variant="success" dot />
<Badge variant="warning" dot />
<Badge variant="error" dot />
<Badge dot />

Props

Prop	Type	Default	Description
variant	'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'	'default'	Semantic color variant.
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 variant 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.