Netzo Logo

badge

Displays a badge or a component that looks like a badge.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { Badge, badgeVariants } from 'netzo/components/badge.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { Badge } from "netzo/components/badge.tsx";

export default () => {
  return <Badge>Badge</Badge>;
};

Destructive

import { Badge } from "netzo/components/badge.tsx";

export default () => {
  return <Badge variant="destructive">Destructive</Badge>;
};

Outline

import { Badge } from "netzo/components/badge.tsx";

export default () => {
  return <Badge variant="outline">Outline</Badge>;
};

Secondary

import { Badge } from "netzo/components/badge.tsx";

export default () => {
  return <Badge variant="secondary">Secondary</Badge>;
};