Command Palette

Search for a command to run...

Docs
Badge Icon

Badge Icon

A badge component with customizable icons and position options.

Installation

Usage

import BadgeIcon from "@/components/ruixen/badge-icon";
import { Zap, Star, Check } from "lucide-react";
 
export default function MyBadge() {
  return (
    <div className="flex gap-2">
      <BadgeIcon icon={Zap}>Featured</BadgeIcon>
      <BadgeIcon icon={Star} variant="secondary">
        Popular
      </BadgeIcon>
      <BadgeIcon icon={Check} iconPosition="right" variant="outline">
        Verified
      </BadgeIcon>
    </div>
  );
}

Props

PropTypeDefaultDescription
iconLucideIconZapThe icon to display
childrenReact.ReactNode"Badge"The badge text content
variant"default" | "secondary" | "destructive" | "outline""default"The badge variant style
iconPosition"left" | "right""left"Position of the icon
classNamestring-Additional CSS classes