Badge

The Badge component is used to display status indicators or labels with customizable styles, themes, and optional icons.

Installation

Add NapUI to your project if you haven't already:

npm install napui-kit

Usage

Basic usage

App.tsx

import { Badge } from "napui-kit";

export default function Basic() {
  return (
    <Badge type="Success">Success</Badge>
    <Badge type="Failed">Error</Badge>
    <Badge type="Pending">Pending</Badge>
  )
}

With Icon

App.tsx

import { Badge } from "napui-kit";
import { Check } from "lucide-react";

export default function WithIcon() {
  return (
    <Badge type="Success" icon={<Check />}>
      Completed
    </Badge>
  );
}

Doted Indicator

App.tsx

import { Badge } from "napui-kit";

export default function WithIcon() {
  return (
  <Badge doted>With Dot</Badge>
    <Badge doted dotColor="bg-blue-500">Custom Dot Color</Badge>
  )
}

Variants

The Badge component supports different types:

Type	Description
basic	Default badge with a light or dark theme
Failed	Displays a red badge with white text
Success	Displays a green badge with white text
Pending	Displays an orange badge with white text

Themes

The component supports two themes:

Theme	Description
light	Light theme with black text on gray background
dark	Dark theme with white text on dark background

Dot Indicator

The Badge component can display a small dot indicator:

• Enabled with doted = true
• Customizable color with dotColor (default: color based on type)

Sizes

The size of the badge is automatically determined based on its content.

Props

Prop	Type	Description
children	React.ReactNode	The content inside the badge
icon	React.ReactNode	Optional icon displayed in the badge
theme	"light" | "dark"	Sets the theme of the badge
type	"basic" | "Failed" | "Success" | "Pending"	Defines the badge style
doted	boolean	Adds a small dot indicator before the text
dotColor	string	Custom dot color (if doted is true)
className	string	Additional CSS classes