Skip to main content

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.

​
Overview

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

​
Basic Usage

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>
  );
}

​
Variants

​
Small (sm)

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 />} />

​
Medium (md)

    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 />} />

​
Large (lg)

<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" />

​
With Icons

​
Text with Icon

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>
    );
}

​
Numeric Badges

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>
  );
}

​
Props

PropTypeDefaultDescription
variant"status" | "sm" | "md" | "lg"—Badge size variant
color"available" | "away" | "offline" | "block" | "default"—Badge color theme
iconReact.ReactNode—Icon to display
textstring | number—Badge text or number

​
Examples

​
User Status Indicators

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>
    );
}

​
Task Status

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>
    );
}