Skip to Content

badge

ui

Displays a badge or a component that looks like a badge.

Use cases

  • Status indicators (active, pending, error)
  • Category labels
  • Notification counts
  • Version tags
  • Technology stack labels

Variants & sizes

Variants

defaultsecondarydestructiveoutlineghostlink

Features

  • Compact size for inline use
  • Supports asChild for polymorphic rendering

Preview

Interactive preview with light/dark mode toggle. Switch to Code tab to view the full source.

DefaultSecondaryDestructiveOutline

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/badge

Dependencies

class-variance-authority

API

Fetch this component's metadata and source code from the registry API.

GET/api/v1/ui/badge

Source

components/ui/badge.tsx