Badge

A small label for counts, states and tags.

A small label to sit beside text. For a row’s status with a coloured dot, reach for StatusBadge instead.

export const client = "only";

import { Badge } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>default</Badge>
      <Badge variant="secondary">secondary</Badge>
      <Badge variant="destructive">destructive</Badge>
      <Badge variant="outline">outline</Badge>
      <Badge variant="ghost">ghost</Badge>
      <Badge variant="link">link</Badge>
    </div>
  );
}

import { Badge, badgeVariants } from "@squadbase/vantage/ui";

Variants

default / secondary / destructive / outline / ghost / link.

badgeVariants returns the class string, for when you want the badge look on a different element such as an <a>.

<a href="/docs" className={badgeVariants({ variant: "outline" })}>
  Documentation
</a>