Badge

Installation

bunx @prototyperco/cli add badge

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/badge.json

npx shadcn@latest add https://prototyper-ui.com/r/badge.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/badge.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/badge.json

This will add the following files to your project:

• components/ui/badge.tsx

Usage

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

<Badge>Badge</Badge>;

Examples

Secondary

Destructive

Outline

Success

Warning

Styling

Data Slots

Use data-slot attributes to target the badge in CSS:

Customization Examples

/* Make all badges square */
[data-slot="badge"] {
  @apply rounded-md;
}

{
  /* Use className for one-off overrides */
}
<Badge className="rounded-md px-4">Custom</Badge>;

API Reference

Badge

A small inline status indicator.

Extends React.ComponentProps<"span">. All standard span props are forwarded via ...props.

badgeVariants

A cva helper exported for use outside of the <Badge> component:

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

<span className={badgeVariants({ variant: "success" })}>Active</span>;

Accessibility

Keyboard Interactions

Badge is a non-interactive presentational element and does not have keyboard interactions.

ARIA Attributes

• Badge renders as a <span> with no implicit ARIA role.
• For status indicators, consider adding role="status" and an appropriate aria-label.

Related