Badge

Indicate status or category.

Source
GitHub
Issues
Report
Badge
Badge example
import { Badge } from "@/shim-ui/badge";

export default () => <Badge>Badge</Badge>;

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add badge

Size

Use the size prop to set the size of the badge.

Tiny
Small
Medium
Large
Size example
import { Badge } from "@/shim-ui/badge";

export default () => (
  <>
    <Badge size={1}>Tiny</Badge>
    <Badge size={2}>Small</Badge>
    <Badge size={3}>Medium</Badge>
    <Badge size={4}>Large</Badge>
  </>
);

Intent

Use the intent prop to set the semantic color of the badge.

Neutral
Accent
Success
Warning
Danger
Intent example
import { Badge } from "@/shim-ui/badge";

export default () => (
  <>
    <Badge intent="neutral">Neutral</Badge>
    <Badge intent="accent">Accent</Badge>
    <Badge intent="success">Success</Badge>
    <Badge intent="warning">Warning</Badge>
    <Badge intent="danger">Danger</Badge>
  </>
);

Content

Badges can contain a label, icon, or both. Use icons by passing an icon component as a child.

If the only child is an SVG element, the badge will be sized to a square. This can be controlled by setting the isSquare prop.

Accessibility note
If a visible label isn't specified, an aria-label should be provided for accessibility.
kkga/dev
Approved
Content example
import {
  CheckFatIcon,
  ClockCountdownIcon,
  GitBranchIcon,
  LeafIcon,
  LockIcon,
} from "@phosphor-icons/react/dist/ssr";
import { Badge } from "@/shim-ui/badge";

export default () => (
  <>
    <Badge intent="success" size={3}>
      <CheckFatIcon aria-label="Approved" size={16} weight="duotone" />
    </Badge>
    <Badge intent="danger" size={3}>
      <LockIcon aria-label="Locked" size={16} weight="duotone" />
    </Badge>

    <Badge intent="warning" size={3}>
      <ClockCountdownIcon aria-label="Pending" size={16} weight="duotone" />
    </Badge>
    <Badge size={3}>
      <LeafIcon aria-label="New" size={16} weight="duotone" />
    </Badge>

    <Badge size={3}>
      <GitBranchIcon size={16} weight="duotone" />
      kkga/dev
    </Badge>

    <Badge intent="success" size={3}>
      <CheckFatIcon size={16} weight="duotone" />
      Approved
    </Badge>
  </>
);