> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Display status indicators, notifications, or labels with customizable variants and colors

export const BadgeTaskStatusPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeTaskStatus" frameBorder="0" width="100%" height="360"></iframe>;

export const BadgeUserStatusPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeUserStatus" frameBorder="0" width="100%" height="360"></iframe>;

export const BadgeNumericPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeNumeric" frameBorder="0" width="100%" height="240"></iframe>;

export const BadgeWithIconTextPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeWithIconText" frameBorder="0" width="100%" height="260"></iframe>;

export const BadgeVariantsStatusPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeVariantsStatus" frameBorder="0" width="100%" height="220"></iframe>;

export const BadgeVariantsLargePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeVariantsLarge" frameBorder="0" width="100%" height="260"></iframe>;

export const BadgeVariantsMediumPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeVariantsMedium" frameBorder="0" width="100%" height="260"></iframe>;

export const BadgeVariantsSmallPreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeVariantsSmall" frameBorder="0" width="100%" height="260"></iframe>;

export const BadgeBasicExamplePreview = () => <iframe src="https://kerny-custom.vercel.app/preview/BadgeBasicExample" frameBorder="0" width="100%" height="260"></iframe>;

## Overview

The Badge component displays status indicators, notifications, or labels with support for different variants, colors, and sizes.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Badge } from '@peppermint-design/devreadykit-custom';

    export default function BadgeBasicExample() {
      return (
        <div className="flex items-center gap-4">
          <Badge variant="status" color="available" />
          <Badge variant="status" color="block" />
          <Badge variant="status" color="away" />
          <Badge variant="status" color="offline" />
        </div>
      );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <BadgeBasicExamplePreview />
  </Tab>
</Tabs>

## Variants

### Small (sm)

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Check } from "@/assets/icons/check.tsx";
    import { Calendar } from "@/assets/icons/calendar.tsx";
    import { Close } from "@/assets/icons/close.tsx";
    import { Minus } from "@/assets/icons/minus.tsx";
    import { Circle } from "@/assets/icons/circle.tsx";

    <Badge variant="sm" color="available" icon={<Check />} />
    <Badge variant="sm" color="away"      icon={<Calendar />} />
    <Badge variant="sm" color="offline"   icon={<Close />} />
    <Badge variant="sm" color="block"     icon={<Minus />} />
    <Badge variant="sm" color="default"   icon={<Circle />} />
    ```
  </Tab>

  <Tab title="Preview">
    <BadgeVariantsSmallPreview />
  </Tab>
</Tabs>

### Medium (md)

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
        import { Check } from "@/assets/icons/check.tsx";
        import { Calendar } from "@/assets/icons/calendar.tsx";
        import { Close } from "@/assets/icons/close.tsx";
        import { Minus } from "@/assets/icons/minus.tsx";
        import { Circle } from "@/assets/icons/circle.tsx";

        <Badge variant="md" color="available" icon={<Check />} />
        <Badge variant="md" color="away"      icon={<Calendar />} />
        <Badge variant="md" color="offline"   icon={<Close />} />
        <Badge variant="md" color="block"     icon={<Minus />} />
        <Badge variant="md" color="default"   icon={<Circle />} />

    ```
  </Tab>

  <Tab title="Preview">
    <BadgeVariantsMediumPreview />
  </Tab>
</Tabs>

### Large (lg)

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Badge variant="lg" color="available" text="Available" />
    <Badge variant="lg" color="away" text="Away" />
    <Badge variant="lg" color="offline" text="Offline" />
    <Badge variant="lg" color="block" text="Blocked" />
    <Badge variant="lg" color="default" text="Default" />
    ```
  </Tab>

  <Tab title="Preview">
    <BadgeVariantsLargePreview />
  </Tab>
</Tabs>

## With Icons

### Text with Icon

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Badge from "@peppermint-design/devreadykit-custom";
    import { Check } from "@/assets/icons/check";
    import { Close } from "@/assets/icons/close";

    export default function BadgeWithIconText() {
        return (
            <div className="flex items-center flex-col gap-4">
                <div className="flex flex-wrap gap-3">
                    <Badge variant="lg" color="available" text="Active" icon={<Check />} />
                    <Badge variant="lg" color="block" text="Error" icon={<Close />} />
                </div>
            </div>
        );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <BadgeWithIconTextPreview />
  </Tab>
</Tabs>

## Numeric Badges

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Badge from "@peppermint-design/devreadykit-custom";

    export default function BadgeNumeric() {
      return (
        <div className="flex items-center flex-col gap-4">
          <div className="flex flex-wrap gap-3">
            <Badge variant="lg" color="default" text={5} />
            <Badge variant="lg" color="default" text={12} />
            <Badge variant="lg" color="default" text={99} />
            <Badge variant="lg" color="default" text={999} />
          </div>
        </div>
      );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <BadgeNumericPreview />
  </Tab>
</Tabs>

## Props

| Prop    | Type                                                         | Default | Description          |
| :------ | :----------------------------------------------------------- | :------ | :------------------- |
| variant | `"status" \| "sm" \| "md" \| "lg"`                           | —       | Badge size variant   |
| color   | `"available" \| "away" \| "offline" \| "block" \| "default"` | —       | Badge color theme    |
| icon    | `React.ReactNode`                                            | —       | Icon to display      |
| text    | `string \| number`                                           | —       | Badge text or number |

## Examples

### User Status Indicators

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Badge from "@peppermint-design/devreadykit-custom";

    const users = [
        { id: 1, name: "Alice Johnson", status: "available", statusText: "Online" },
        { id: 2, name: "Brian Kim", status: "away", statusText: "Away" },
        { id: 3, name: "Carlos Ruiz", status: "offline", statusText: "Offline" },
        { id: 4, name: "Dana Lee", status: "block", statusText: "Blocked" },
    ] as const;

    export default function BadgeUserStatus() {
        return (
            <div className="flex items-center flex-col gap-4 w-full">
                <div className="w-full max-w-md space-y-3">
                    {users.map((user) => (
                        <div key={user.id} className="flex items-center justify-between rounded border gap-4 p-3">
                            <span className="text-sm text-neutral-800">{user.name}</span>
                            <Badge variant="lg" color={user.status} text={user.statusText} />
                        </div>
                    ))}
                </div>
            </div>
        );
    }

    ```
  </Tab>

  <Tab title="Preview">
    <BadgeUserStatusPreview />
  </Tab>
</Tabs>

### Task Status

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import Badge from "@peppermint-design/devreadykit-custom";
    import { Check } from "@/assets/icons/check";
    import { Close } from "@/assets/icons/close";
    import { Console } from "@/assets/icons/console.tsx";
    import { MoreHorizontal } from "@/assets/icons/more-horizontal.tsx";

    export default function BadgeTaskStatus() {
        return (
            <div className="flex items-center flex-col gap-4 w-full">
                <div className="w-full max-w-md space-y-3">
                    <div className="flex items-center justify-between rounded border gap-4 p-3">
                        <span className="text-sm text-neutral-800">Completed</span>
                        <Badge variant="lg" color="available" text="Done" icon={<Check />} />
                    </div>
                    <div className="flex items-center justify-between rounded border gap-4 p-3">
                        <span className="text-sm text-neutral-800">In-progress</span>
                        <Badge variant="lg" color="away" text="In Progress" icon={<Clock />} />
                    </div>
                    <div className="flex items-center justify-between rounded border gap-4 p-3">
                        <span className="text-sm text-neutral-800">Blocked</span>
                        <Badge variant="lg" color="block" text="Blocked" icon={<Console />} />
                    </div>
                    <div className="flex items-center justify-between rounded border gap-4 p-3">
                        <span className="text-sm text-neutral-800">Pending</span>
                        <Badge variant="lg" color="offline" text="Pending" icon={<MoreHorizontal />} />
                    </div>
                </div>
            </div>
        );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <BadgeTaskStatusPreview />
  </Tab>
</Tabs>