RadCN
Displayreadycomponentready

Badge

A compact label primitive for status, metadata, filters, and links.

Importimport { Badge } from 'radcn/badge'
Preview

Live package example

Render the four upstream Badge examples with app-owned icon and count presentation.

Example Parity

Render the four upstream Badge examples with app-owned icon and count presentation.

Preview
BadgeSecondaryDestructiveOutlineVerified89920+
Destructive
Outline
Secondary
import { Badge } from 'radcn/badge'

export function BadgePreview() {
  return (
    <div class="badge-preview">
      <div data-radcn-docs-badge-family="badge-demo">
        <Badge>Badge</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>

        <Badge
          class="verified-badge"
          style="background:#2563eb;color:white"
          variant="secondary"
        >
          <span aria-hidden="true">✓</span>
          Verified
        </Badge>
        <Badge class="count-badge">8</Badge>
        <Badge class="count-badge" variant="destructive">99</Badge>
        <Badge class="count-badge" variant="outline">20+</Badge>
      </div>

      <Badge data-radcn-docs-badge-family="badge-destructive" variant="destructive">
        Destructive
      </Badge>
      <Badge data-radcn-docs-badge-family="badge-outline" variant="outline">
        Outline
      </Badge>
      <Badge data-radcn-docs-badge-family="badge-secondary" variant="secondary">
        Secondary
      </Badge>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Badge } from 'radcn/badge'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Renders a span for plain metadata and an anchor when href is supplied.
  • Keeps the visible text as the accessible name for both static and linked badges.
  • Avoids client behavior, so status labels remain available in server-rendered HTML.

Customization

  • Variants are exposed as classes and data-variant attributes for app-level extension.
  • Badge colors inherit the RadCN token set, including destructive, secondary, and outline surfaces.
  • Icon and count/pill badge presentation remains app-owned children, class, style, and CSS variable composition.

Remix 3 Notes

  • The Remix 3 badge is a host element component, not a React slot wrapper.
  • RadCN keeps link behavior explicit with href rather than forwarding arbitrary React children through asChild.
  • shadcn className maps to RadCN class, data-slot="badge" maps to data-radcn-badge plus data-variant, and React prop spreading maps to explicit Remix UI props.
  • Tailwind utility styling maps to RadCN classes, style, CSS variables, and app CSS; lucide-react icons are app-owned presentation and not Badge dependencies.