Componentdata-displayLabs examplesMIT

Badge

A compact status label in five tones, with a matching status icon and a subtle tinted style.

DraftIn reviewDeployedDegradedFailed

Install

Item badge-lucide · registry JSON

npx shadcn@latest add https://labs.designfrom.com/r/badge-lucide.json

npx shadcn@latest add @designfrom/badge-lucide

Once, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }

npx designfrom add badge

npm i @designfrom/react

import { Badge, badgeVariants } from "@designfrom/react/badge";

Source

Comments are kept. The header lists provenance, license and install commands for people and coding assistants.

components/ui/badge.tsx

import { cva, type VariantProps } from "class-variance-authority";
import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";
import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * @dfl-header: v1, generated by labs.designfrom.com at build time
 * Item: badge-lucide (Badge: Lucide)
 * What: A compact status label in five tones, with a matching status icon
 *    and a subtle tinted style.
 * Status: ready. License: MIT. Author: Design From Labs
 *    <https://labs.designfrom.com>
 * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/badge)
 * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT);
 *    S-005 Lucide icons (ISC); S-006 Phosphor Icons (MIT); S-008
 *    Tailwind CSS (MIT); S-018 class-variance-authority (Apache-2.0)
 * Install: npx shadcn@latest add https://labs.designfrom.com/r/badge-lucide.json
 *   npx shadcn@latest add @designfrom/badge-lucide
 *   npx designfrom add badge
 *   npm i @designfrom/react, then import { Badge, badgeVariants } from "@designfrom/react/badge";
 * Requires: class-variance-authority, lucide-react, registry: utils
 * Docs: https://labs.designfrom.com/ui/badge (index: https://labs.designfrom.com/llms.txt)
 */

// Solid style: filled tone colors from the shared token layer.
const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
  {
    variants: {
      tone: {
        neutral: "border-transparent bg-secondary text-secondary-foreground",
        info: "border-transparent bg-primary text-primary-foreground",
        success:
          "border-transparent bg-badge-success text-badge-success-foreground",
        warning:
          "border-transparent bg-badge-warning text-badge-warning-foreground",
        danger: "border-transparent bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      tone: "neutral",
    },
  },
);

// Each status tone pairs its color with an icon, so meaning never rests on
// color alone.
const toneIcons = {
  neutral: null,
  info: Info,
  success: CircleCheck,
  warning: TriangleAlert,
  danger: CircleX,
} as const;

export interface BadgeProps
  extends React.ComponentProps<"span">,
    VariantProps<typeof badgeVariants> {
  /** Shows the tone's status icon (not shown for neutral). */
  showIcon?: boolean;
}

function Badge({
  className,
  tone = "neutral",
  showIcon = true,
  children,
  ...props
}: BadgeProps) {
  const Icon = toneIcons[tone ?? "neutral"];
  return (
    <span
      data-slot="badge"
      data-tone={tone}
      className={cn(badgeVariants({ tone }), className)}
      {...props}
    >
      {showIcon && Icon ? <Icon aria-hidden="true" /> : null}
      {children}
    </span>
  );
}

export { Badge, badgeVariants };

Dependencies

DraftIn reviewDeployedDegradedFailed

Install

Item badge-phosphor · registry JSON

npx shadcn@latest add https://labs.designfrom.com/r/badge-phosphor.json

npx shadcn@latest add @designfrom/badge-phosphor

Once, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }

npx designfrom add badge --icons phosphor

npm i @designfrom/react

import { Badge, badgeVariants } from "@designfrom/react/badge/phosphor";

Source

Comments are kept. The header lists provenance, license and install commands for people and coding assistants.

components/ui/badge.tsx

import { cva, type VariantProps } from "class-variance-authority";
import { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon } from "@phosphor-icons/react/ssr";
import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * @dfl-header: v1, generated by labs.designfrom.com at build time
 * Item: badge-phosphor (Badge: Phosphor)
 * What: A compact status label in five tones, with a matching status icon
 *    and a subtle tinted style.
 * Status: ready. License: MIT. Author: Design From Labs
 *    <https://labs.designfrom.com>
 * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/badge)
 * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT);
 *    S-005 Lucide icons (ISC); S-006 Phosphor Icons (MIT); S-008
 *    Tailwind CSS (MIT); S-018 class-variance-authority (Apache-2.0)
 * Install: npx shadcn@latest add https://labs.designfrom.com/r/badge-phosphor.json
 *   npx shadcn@latest add @designfrom/badge-phosphor
 *   npx designfrom add badge --icons phosphor
 *   npm i @designfrom/react, then import { Badge, badgeVariants } from "@designfrom/react/badge/phosphor";
 * Requires: class-variance-authority, @phosphor-icons/react, registry: utils
 * Docs: https://labs.designfrom.com/ui/badge (index: https://labs.designfrom.com/llms.txt)
 */

// Solid style: filled tone colors from the shared token layer.
const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
  {
    variants: {
      tone: {
        neutral: "border-transparent bg-secondary text-secondary-foreground",
        info: "border-transparent bg-primary text-primary-foreground",
        success:
          "border-transparent bg-badge-success text-badge-success-foreground",
        warning:
          "border-transparent bg-badge-warning text-badge-warning-foreground",
        danger: "border-transparent bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      tone: "neutral",
    },
  },
);

// Each status tone pairs its color with an icon, so meaning never rests on
// color alone.
const toneIcons = {
  neutral: null,
  info: InfoIcon,
  success: CheckCircleIcon,
  warning: WarningIcon,
  danger: XCircleIcon,
} as const;

export interface BadgeProps
  extends React.ComponentProps<"span">,
    VariantProps<typeof badgeVariants> {
  /** Shows the tone's status icon (not shown for neutral). */
  showIcon?: boolean;
}

function Badge({
  className,
  tone = "neutral",
  showIcon = true,
  children,
  ...props
}: BadgeProps) {
  const Icon = toneIcons[tone ?? "neutral"];
  return (
    <span
      data-slot="badge"
      data-tone={tone}
      className={cn(badgeVariants({ tone }), className)}
      {...props}
    >
      {showIcon && Icon ? <Icon aria-hidden="true" /> : null}
      {children}
    </span>
  );
}

export { Badge, badgeVariants };

Dependencies

DraftIn reviewDeployedDegradedFailed

Install

Item badge-subtle-lucide · registry JSON

npx shadcn@latest add https://labs.designfrom.com/r/badge-subtle-lucide.json

npx shadcn@latest add @designfrom/badge-subtle-lucide

Once, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }

npx designfrom add badge --style subtle

npm i @designfrom/react

import { Badge, badgeVariants } from "@designfrom/react/badge-subtle";

Source

Comments are kept. The header lists provenance, license and install commands for people and coding assistants.

components/ui/badge.tsx

import { cva, type VariantProps } from "class-variance-authority";
import { CircleCheck, CircleX, Info, TriangleAlert } from "lucide-react";
import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * @dfl-header: v1, generated by labs.designfrom.com at build time
 * Item: badge-subtle-lucide (Badge: Subtle, Lucide)
 * What: A compact status label in five tones, with a matching status icon
 *    and a subtle tinted style.
 * Status: ready. License: MIT. Author: Design From Labs
 *    <https://labs.designfrom.com>
 * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/badge)
 * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT);
 *    S-005 Lucide icons (ISC); S-006 Phosphor Icons (MIT); S-008
 *    Tailwind CSS (MIT); S-018 class-variance-authority (Apache-2.0)
 * Install: npx shadcn@latest add https://labs.designfrom.com/r/badge-subtle-lucide.json
 *   npx shadcn@latest add @designfrom/badge-subtle-lucide
 *   npx designfrom add badge --style subtle
 *   npm i @designfrom/react, then import { Badge, badgeVariants } from "@designfrom/react/badge-subtle";
 * Requires: class-variance-authority, lucide-react, registry: utils
 * Docs: https://labs.designfrom.com/ui/badge (index: https://labs.designfrom.com/llms.txt)
 */

// Subtle style: a light tint of the tone color with body-colored text, for
// dense tables and lists where solid badges would shout.
const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
  {
    variants: {
      tone: {
        neutral: "border-border bg-muted text-muted-foreground",
        info: "border-primary/20 bg-primary/10 text-foreground",
        success: "border-badge-success/30 bg-badge-success/10 text-foreground",
        warning: "border-badge-warning/40 bg-badge-warning/15 text-foreground",
        danger: "border-destructive/30 bg-destructive/10 text-foreground",
      },
    },
    defaultVariants: {
      tone: "neutral",
    },
  },
);

// Each status tone pairs its color with an icon, so meaning never rests on
// color alone.
const toneIcons = {
  neutral: null,
  info: Info,
  success: CircleCheck,
  warning: TriangleAlert,
  danger: CircleX,
} as const;

export interface BadgeProps
  extends React.ComponentProps<"span">,
    VariantProps<typeof badgeVariants> {
  /** Shows the tone's status icon (not shown for neutral). */
  showIcon?: boolean;
}

function Badge({
  className,
  tone = "neutral",
  showIcon = true,
  children,
  ...props
}: BadgeProps) {
  const Icon = toneIcons[tone ?? "neutral"];
  return (
    <span
      data-slot="badge"
      data-tone={tone}
      className={cn(badgeVariants({ tone }), className)}
      {...props}
    >
      {showIcon && Icon ? <Icon aria-hidden="true" /> : null}
      {children}
    </span>
  );
}

export { Badge, badgeVariants };

Dependencies

DraftIn reviewDeployedDegradedFailed

Install

Item badge-subtle-phosphor · registry JSON

npx shadcn@latest add https://labs.designfrom.com/r/badge-subtle-phosphor.json

npx shadcn@latest add @designfrom/badge-subtle-phosphor

Once, in components.json: "registries": { "@designfrom": "https://labs.designfrom.com/r/{name}.json" }

npx designfrom add badge --icons phosphor --style subtle

npm i @designfrom/react

import { Badge, badgeVariants } from "@designfrom/react/badge-subtle/phosphor";

Source

Comments are kept. The header lists provenance, license and install commands for people and coding assistants.

components/ui/badge.tsx

import { cva, type VariantProps } from "class-variance-authority";
import { CheckCircleIcon, InfoIcon, WarningIcon, XCircleIcon } from "@phosphor-icons/react/ssr";
import type * as React from "react";

import { cn } from "@/lib/utils";

/**
 * @dfl-header: v1, generated by labs.designfrom.com at build time
 * Item: badge-subtle-phosphor (Badge: Subtle, Phosphor)
 * What: A compact status label in five tones, with a matching status icon
 *    and a subtle tinted style.
 * Status: ready. License: MIT. Author: Design From Labs
 *    <https://labs.designfrom.com>
 * Source: https://github.com/Design-from-labs/labs @ 803b92c1a30e (examples/badge)
 * Credits: S-003 React (MIT); S-004 shadcn/ui and its registry schema (MIT);
 *    S-005 Lucide icons (ISC); S-006 Phosphor Icons (MIT); S-008
 *    Tailwind CSS (MIT); S-018 class-variance-authority (Apache-2.0)
 * Install: npx shadcn@latest add https://labs.designfrom.com/r/badge-subtle-phosphor.json
 *   npx shadcn@latest add @designfrom/badge-subtle-phosphor
 *   npx designfrom add badge --icons phosphor --style subtle
 *   npm i @designfrom/react, then import { Badge, badgeVariants } from "@designfrom/react/badge-subtle/phosphor";
 * Requires: class-variance-authority, @phosphor-icons/react, registry: utils
 * Docs: https://labs.designfrom.com/ui/badge (index: https://labs.designfrom.com/llms.txt)
 */

// Subtle style: a light tint of the tone color with body-colored text, for
// dense tables and lists where solid badges would shout.
const badgeVariants = cva(
  "inline-flex w-fit shrink-0 items-center gap-1 whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0",
  {
    variants: {
      tone: {
        neutral: "border-border bg-muted text-muted-foreground",
        info: "border-primary/20 bg-primary/10 text-foreground",
        success: "border-badge-success/30 bg-badge-success/10 text-foreground",
        warning: "border-badge-warning/40 bg-badge-warning/15 text-foreground",
        danger: "border-destructive/30 bg-destructive/10 text-foreground",
      },
    },
    defaultVariants: {
      tone: "neutral",
    },
  },
);

// Each status tone pairs its color with an icon, so meaning never rests on
// color alone.
const toneIcons = {
  neutral: null,
  info: InfoIcon,
  success: CheckCircleIcon,
  warning: WarningIcon,
  danger: XCircleIcon,
} as const;

export interface BadgeProps
  extends React.ComponentProps<"span">,
    VariantProps<typeof badgeVariants> {
  /** Shows the tone's status icon (not shown for neutral). */
  showIcon?: boolean;
}

function Badge({
  className,
  tone = "neutral",
  showIcon = true,
  children,
  ...props
}: BadgeProps) {
  const Icon = toneIcons[tone ?? "neutral"];
  return (
    <span
      data-slot="badge"
      data-tone={tone}
      className={cn(badgeVariants({ tone }), className)}
      {...props}
    >
      {showIcon && Icon ? <Icon aria-hidden="true" /> : null}
      {children}
    </span>
  );
}

export { Badge, badgeVariants };

Dependencies

Usage

<Badge tone="success">Deployed</Badge>

Props

Prop	Type	Default	Description
tone	"neutral" \| "info" \| "success" \| "warning" \| "danger"	"neutral"	Meaning of the label. Every tone except neutral shows its status icon.
showIcon	boolean	true	Hide the status icon when space is tight; the text must still carry the meaning.
...props	React.ComponentProps<"span">		Every native span attribute.

Accessibility

Meaning never relies on color alone: each status tone pairs its color with an icon and the text.
Icons are aria-hidden; the visible text is the accessible name.
Tone colors meet WCAG AA contrast against their foreground token in light and dark themes.

Credits

React · Meta Platforms and contributors · MIT
shadcn/ui and its registry schema · shadcn · MIT
Lucide icons · Lucide contributors · ISC
Phosphor Icons · Phosphor Icons (Helena Zhang and Tobias Fried) · MIT
Tailwind CSS · Tailwind Labs · MIT
class-variance-authority · Joe Bell · Apache-2.0

License and source

License: MIT
Author: Design From Labs <https://labs.designfrom.com>
Source: github.com/Design-from-labs/labs
Commit: 803b92c1a30e
Date: 2026-10-12
Origin: labs-examples