A Badge component is a small UI element used to display a count, status, or label associated with another element, such as an icon or button. Badges are commonly used to highlight notifications, messages, or any relevant information in a compact and visually distinct way, often appearing as small circles or rectangles with numbers or text.

# Demo

Sample

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
size	BadgeSize	BadgeSize.SM	You can pass size of the badge.
children	string \| ReactNode	Required	You can pass badge content as children.

# Usage

import { NBadge, BadgeSize } from 'nayan';

const Badge = () => {
  return (
    <div>
      <NBadge size={BadgeSize.XS} className="text-text bg-card border border-border mr-2">Sample</NBadge>
      <NBadge size={BadgeSize.XS} className="text-blue-700 bg-blue-300 mr-2">Sample</NBadge>
      <NBadge size={BadgeSize.SM} className="text-green-700 bg-green-300 mr-2">Sample</NBadge>
      <NBadge size={BadgeSize.MD} className="text-yellow-700 bg-yellow-300 mr-2">Sample</NBadge>
      <NBadge size={BadgeSize.LG} className="text-red-700 bg-red-300 mr-2">Sample</NBadge>
    </div>
  );
};

export default Badge;