Badge

Compact label for status, counts, and categories. A plain styled span — no base-ui dependency.

Variants

defaultsolidsoftsuccesswarningerrorinfo

import { Badge } from "@brijbyte/agentic-ui/badge";
import "@brijbyte/agentic-ui/badge.css";

export default function VariantsDemo() {
  return (
    <>
      <Badge>default</Badge>
      <Badge variant="solid">solid</Badge>
      <Badge variant="soft">soft</Badge>
      <Badge variant="success">success</Badge>
      <Badge variant="warning">warning</Badge>
      <Badge variant="error">error</Badge>
      <Badge variant="info">info</Badge>
    </>
  );
}

With dot indicator

onlinependingofflinesyncing

import { Badge } from "@brijbyte/agentic-ui/badge";
import "@brijbyte/agentic-ui/badge.css";

export default function DotDemo() {
  return (
    <>
      <Badge variant="success" dot>
        online
      </Badge>
      <Badge variant="warning" dot>
        pending
      </Badge>
      <Badge variant="error" dot>
        offline
      </Badge>
      <Badge variant="info" dot>
        syncing
      </Badge>
    </>
  );
}

API Reference

Badge

Compact label for status, counts, and categories. A plain styled <span> —
no base-ui dependency.

Prop	Type	Default
variant	`"default" \| "solid" \| "soft" \| "success" \| "warning" \| "error" \| "info"`	`default`
Visual style and semantic colour.
dot	`boolean`	`false`
Show a small coloured dot indicator before the label.

CSS Class Names

Available as keys on the BadgeStyles object. Each key maps to a hashed CSS module class name at runtime.

dotrootvariant-defaultvariant-errorvariant-infovariant-softvariant-solidvariant-successvariant-warning