Neumorphism UI
Data & feedback@neumorphism-ui/badge

Badge

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

@neumorphism-ui/badge
Registry JSON

Preview

DefaultPrimarySoftOutlineDestructive

Installation

Installation: badgenpx shadcn@latest add @neumorphism-ui/badge

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

Badge usage code
<div className="flex gap-2">
  <Badge>Default</Badge>
  <Badge variant="primary">Ready</Badge>
  <Badge variant="soft">Draft</Badge>
  <Badge variant="destructive">Failed</Badge>
</div>

API Reference

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.