Neumorphism UI

Badge

Use Badge for a short status or category beside a title, item, or table row.

Preview

Five badge variants

Compare default, primary, soft, outline, and destructive labels side by side.

DefaultPrimarySoftOutlineDestructive

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/badge

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Put a concise label inside Badge and choose a variant to set its emphasis. Keep actions in a Button or link rather than relying on badge appearance to imply interaction.

import { Badge } from "@/components/ui/badge";

export default function Example() {
  return <Badge variant="primary">Ready</Badge>;
}

API Reference

A lightweight span-based component with five variants. It supplies visual emphasis without adding interaction or an implicit ARIA role.

ComponentPropTypeDefaultDescription
Badgevariant"default" | "primary" | "soft" | "outline" | "destructive""default"Selects the emphasis level and color for the status.
BadgechildrenrequiredReact.ReactNode—A short status or classification label.
BadgeclassNamestring—Extends the size, spacing, and color styles.

Accessibility

  • 01

    Badge renders as a span by default, so provide text that explicitly communicates the status.

  • 02

    Do not rely on color alone; use clear labels such as Ready or Failed.

  • 03

    When interaction is required, place Badge inside a Button or link instead of attaching events directly to it.