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

3

Notifications

99+

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

3

Code

<div className="relative inline-flex items-center">
  <Mail className="h-6 w-6" />
  <Badge text="3" type="primary" variant="pulse" />
</div>