Badge

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

Rendered live, with the same build of the library you install.

Colors:

DefaultAccentSuccessWarningDanger

Variants:

PrimarySecondarySoft

Sizes:

SmallMediumLarge

Usage

Source

Badge.tsx

import { NBadge } from '@nayan-ui/react';

const Badge = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Colors:</h3>
      <div className="flex flex-wrap gap-2 mb-5">
        <NBadge color="default">Default</NBadge>
        <NBadge color="accent">Accent</NBadge>
        <NBadge color="success">Success</NBadge>
        <NBadge color="warning">Warning</NBadge>
        <NBadge color="danger">Danger</NBadge>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Variants:</h3>
      <div className="flex flex-wrap gap-2 mb-5">
        <NBadge color="accent" variant="primary">
          Primary
        </NBadge>
        <NBadge color="accent" variant="secondary">
          Secondary
        </NBadge>
        <NBadge color="accent" variant="soft">
          Soft
        </NBadge>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Sizes:</h3>
      <div className="flex flex-wrap items-center gap-2 mb-5">
        <NBadge color="accent" size="sm">
          Small
        </NBadge>
        <NBadge color="accent" size="md">
          Medium
        </NBadge>
        <NBadge color="accent" size="lg">
          Large
        </NBadge>
      </div>
    </div>
  );
};

export default Badge;

Attributes

6 props

Name	Type	Default	Details
children	React.ReactNode	Required	You can pass badge content as children.
color	'default' \| 'accent' \| 'success' \| 'warning' \| 'danger'	'default'	Badge color theme.
variant	'primary' \| 'secondary' \| 'soft'	'soft'	Badge visual variant.
size	'sm' \| 'md' \| 'lg'	'md'	Badge size.
className	string	' '	Additional CSS classes.
role	string	'status'	ARIA role for accessibility.