Buy Template Now $65→
Skip to main content

Badge Component

The Badge component is a lightweight UI element used to display labels, announcements, categories, statuses, and feature highlights.

Component Location

Import the component using:

import Badge from "@/components/ui/badge";

Preview

New Feature

Features

  • Custom Lucide icons
  • Optional filled icons
  • Lightweight and reusable
  • Fully customizable
  • Perfect for marketing sections and dashboards

Basic Usage

<Badge>
  New Feature
</Badge>

Custom Icons

You can replace the default icon with any Lucide icon.

import { Sparkles } from "lucide-react";
 
<Badge icon={Sparkles}>
  AI Powered
</Badge>

Filled Icons

Enable the fill prop to display a filled icon.

import { Star } from "lucide-react";
 
<Badge icon={Star} fill>
  Featured
</Badge>

Icon Size

Adjust the icon size using the iconSize prop.

import { Rocket } from "lucide-react";
 
<Badge
  icon={Rocket}
  iconSize={20}
>
  Launch Ready
</Badge>

Available Props

interface BadgeProps {
  children: React.ReactNode;
  icon?: LucideIcon;
  iconSize?: number;
  fill?: boolean;
  className?: string;
}

children

Content displayed inside the badge.

<Badge>
  New Feature
</Badge>

icon

Custom Lucide icon.

<Badge icon={Sparkles}>
  AI Powered
</Badge>

iconSize

Controls the icon size.

<Badge
  icon={Rocket}
  iconSize={20}
>
  Launch Ready
</Badge>

fill

Fills the icon using the primary color.

<Badge
  icon={Star}
  fill
>
  Featured
</Badge>

className

Add custom styling.

<Badge className="bg-primary text-background">
  Custom Badge
</Badge>

Summary

The Badge component is ideal for:

  • Announcements
  • Product statuses
  • Categories
  • Labels
  • Feature highlights
  • Marketing callouts

Use custom icons and filled states to create badges that match your application's design.

Nextbutton