Wave 1

Badge

A short label for status or metadata. Server-component safe.

Long messages: use Alert.
Clickable filters: use Button or a toggle.

Install

Terminal

pnpm dlx shadcn@latest add @acme/badge

Or import from the package: import { Badge } from '@acme/react'

Examples

Basic

NewDraftv2.4.0PaidDue soonOverdueBeta

badge-basic.tsx

import { Badge } from '@/components/ui/badge'

export default function BadgeBasic() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge>New</Badge>
      <Badge variant="secondary">Draft</Badge>
      <Badge variant="outline">v2.4.0</Badge>
      <Badge variant="success">Paid</Badge>
      <Badge variant="warning">Due soon</Badge>
      <Badge variant="destructive">Overdue</Badge>
      <Badge variant="info">Beta</Badge>
    </div>
  )
}

Native

The same component for iOS (SwiftUI, AcmeUI) and Android (Jetpack Compose, com.acme.ui), built on each platform's own controls with the same tokens.

AcmeBadge

Swift

AcmeBadge("Paid", variant: .success)

The text must carry the meaning on its own.

Badge on iOS, light mode — iOS, light mode

Badge on iOS, dark mode — iOS, dark mode

Props

Badge props
Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'outline' \| 'destructive' \| 'success' \| 'warning' \| 'info'	'default'	Color. The text must carry the meaning on its own.

You provide: Text that makes sense without its color.
Built in: All variants meet 4.5:1 text contrast in every mode.
WCAG 2.2 criteria: 1.4.1, 1.4.3

Don’t

Use a colored dot with no text.

Tokens

color.primary
color.secondary
color.success
color.warning
color.destructive
color.info
radius.md