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>
    </>
  );
}