Badge

Badge is a compact label for status, category, count, or inline metadata. It helps users scan short pieces of information without interrupting the surrounding content.

Badges are non-interactive by default. Render one as a button or link only when selecting it performs an action or opens another page.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/badge.json

Usage

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

<Badge variant="outline">Draft</Badge>

Use the render prop when a badge needs button or link semantics:

<Badge variant="link" render={<a href="/releases/24" />}>
    View release
</Badge>

Variants

variant accepts default, secondary, destructive, outline, ghost, or link. Choose a variant based on meaning and emphasis, not decoration alone.

Use default for prominent status, secondary for quieter metadata, destructive for errors, and outline for neutral categories. ghost removes the surrounding surface, while link adds link-like emphasis for an interactive badge.

API Reference

Badge

The component renders a span by default and forwards native props to the rendered element. Use the render prop to provide button or link semantics without adding an extra wrapper.

Accessibility

Keep badge text short and explicit. Write “Failed” instead of relying on a red color, and include a visible number when the badge communicates a count.

Interactive badges need an accessible name and visible focus treatment. Their text should describe the action or destination, not only the current visual state.