Badge

Overview

Badges are small status descriptors that can be used to highlight specific information, such as notification counts, status indicators, or labels. They can include text, numbers, or just a dot indicator.

Preview

Preview

Notifications

Code

import { Badge } from './components/ui';
import { Mail } from 'lucide-react';


function BadgeDemo() {
  return (
    <div className="flex items-center gap-8">
      <div className="relative inline-flex items-center">
        <Mail className="h-6 w-6" />
        <Badge text="3" type="primary" />
      </div>
      <div className="relative inline-flex items-center">
        <span className="text-lg font-medium">Notifications</span>
        <Badge text="99+" type="error" variant="pulse" />
      </div>
    </div>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add badge

yarn

yarn @mindfiredigital/ignix-ui add badge

pnpm

pnpm @mindfiredigital/ignix-ui add badge

Usage

Import the component:

import { Badge } from './components/ui';

Basic Usage

function BasicBadge() {
  return (
    <div className="relative inline-flex items-center">
      <Mail className="h-6 w-6" />
      <Badge text="3" type="primary" />
    </div>
  );
}

Variants

Preview

StatusFeaturedDismissible

Notifications3

Code

import { useState } from 'react';
import { Badge } from '@ignix-ui/badge';
import { Mail, Star } from 'lucide-react';

function BadgeExample() {
  const [removed, setRemoved] = useState(false);

  return (
    <div className="flex flex-wrap items-center gap-4">
      <Badge variant="default" size="md">
        Status
      </Badge>

      <Badge variant="default" size="md" icon={<Star className="h-3 w-3" />}>
        Featured
      </Badge>

      {!removed && (
        <Badge variant="default" size="md" onRemove={() => setRemoved(true)}>
          Dismissible
        </Badge>
      )}

      <Badge variant="notification" anchor={<Mail className="h-8 w-8" />}>
        3
      </Badge>
    </div>
  );
}