Badge

The Badge component displays a badge or a component that looks like a badge. It supports different variants for various badge styles.

Preview

Usage

import { Badge } from 'components/lib';

function MyComponent({ ...props }){
  return (
    <Badge variant='blue'>
      Badge Text
    </Badge>
  );
}

Props

Prop	Description	Required	Value
className	custom styles	optional	SCSS or Tailwind
children	badge text	required	string
variant	badge variant	optional	string (secondary/destructive/outline/red/blue/green/orange)

Notes

• The Badge component uses the cn function from 'components/lib' to handle class names.

• The variant prop determines the styling of the badge.

• Custom styles can be applied using the className prop.

• For more details, refer to the Shadcn Badge documentation.