components

Badge

Badge is a small numeric indicator used to show counts, notifications, or quantities. It renders as a compact pill displaying the value of its content prop. Badge does not render children text — for colored text labels or status tags, use the Lozenge component instead.

Import

import { Badge } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display a count of items, such as unread notifications or pending tasks.
+Show a numeric value alongside an icon, avatar, or navigation item.
+Indicate quantity or a numeric status at a glance.

When not to use

−For colored text labels or status tags — use Lozenge instead.
−For non-numeric status indicators — use Lozenge with a color and text.
−As a standalone decorative element with no meaningful count.

Examples

Code Samples

Basic Badge

Badges display a numeric count using the content prop. Without a theme, badges render with a neutral grey background.

import { Badge } from "@skedulo/breeze-ui-react";

export default function BasicBadge() {
  return (
    <div className="flex gap-3 items-center">
      <Badge content="1" />
      <Badge content="5" />
      <Badge content="12" />
      <Badge content="99" />
    </div>
  );
}

Themes

Badge supports three themes beyond the default neutral style: "subtle" (blue tint), "primary" (brand color, white text), and "important" (red, white text for urgent counts).

import { Badge } from "@skedulo/breeze-ui-react";

export default function BadgeThemes() {
  return (
    <div className="flex gap-3 items-center">
      <Badge content="5" />
      <Badge content="5" theme="subtle" />
      <Badge content="5" theme="primary" />
      <Badge content="5" theme="important" />
    </div>
  );
}

With Limit

The limit prop caps the displayed number and appends a + sign when the actual value exceeds the limit.

import { Badge } from "@skedulo/breeze-ui-react";

export default function BadgeWithLimit() {
  return (
    <div className="flex gap-3 items-center">
      <Badge content="3" limit={9} />
      <Badge content="10" limit={9} />
      <Badge content="150" limit={99} />
    </div>
  );
}

Badge in Context

Badges are commonly used alongside icons, navigation items, or avatars to indicate counts.

import { Badge, Button, Icon } from "@skedulo/breeze-ui-react";

export default function BadgeInContext() {
  return (
    <div className="flex gap-6 items-center">
      <div className="flex items-center gap-1.5">
        <span className="text-sm text-gray-700">Notifications</span>
        <Badge content="3" theme="important" />
      </div>
      <div className="flex items-center gap-1.5">
        <span className="text-sm text-gray-700">Messages</span>
        <Badge content="12" theme="subtle" />
      </div>
      <div className="flex items-center gap-1.5">
        <span className="text-sm text-gray-700">Tasks</span>
        <Badge content="99" limit={99} />
      </div>
    </div>
  );
}

Guidelines

Do

✓Use the content prop to pass numeric values as strings.
✓Use the limit prop to cap large numbers (e.g. limit={99} shows "99+").
✓Use theme="important" for urgent counts that need attention (e.g. errors).
✓Use theme="primary" for primary action counts (e.g. selected items).
✓Keep badge values short — single or double digit numbers work best.

Don't

✗Don't pass children text — Badge ignores children and only renders the content prop.
✗Don't use the color prop — Badge themes are controlled via the theme prop, not color.
✗Don't use Badge when Lozenge is more appropriate (text labels, status tags).
✗Don't display long strings or sentences — Badge is for counts only.

CSS Custom Properties

Token	Value	Description
--brz-badge-background-color	var(--brz-color-neutral-250)	Background color of the badge. Overridden by theme variants.
--brz-badge-color	var(--brz-color-neutral-750)	Text color of the badge. Overridden by theme variants.

API Reference

Prop	Type	Default	Description
content	string	—	The numeric value to display inside the badge. This is the primary way to show content — children text is not rendered.
limit	number	—	A maximum numeric value. When the content exceeds this limit, the badge displays the limit followed by "+" (e.g. content="150" limit={99} shows "99+").
theme	"subtle" \| "primary" \| "important"	(neutral)	The visual theme of the badge. Default is neutral grey. Subtle uses a blue tint, primary uses the brand color with white text, and important uses red with white text for urgent indicators.

Related Components

Lozenge Avatar Button