Badge

Name: Nayan UI
Author: Nayan UI

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

Colors:

DefaultAccentSuccessWarningDanger

Variants:

PrimarySecondarySoft

Sizes:

SmallMediumLarge

Usage

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

const Badge = () => {
  return (
    <div className="flex flex-wrap gap-2">
      <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>
  );
};

export default Badge;

Attributes

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.