Badge

A short label for a status or a count. Renders a link or any element through render.

Installation

npx rasengan-ui add badge

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/badge.json

Usage

import { Badge } from "@/components/ui/badge";
 
export function Status() {
  return <Badge variant="secondary">Beta</Badge>;
}

Variants

default filled, soft as a wash, outline as a border, secondary in grey, and destructive for errors (shorthand for tone="destructive"). tone is the colour: primary by default, or neutral, success, warning, info, destructive; outline stays neutral in primary.

<Badge variant="soft" tone="success">Live</Badge>

Sizes

sm, default and lg set the padding, the text and the icon.

As a link

<Badge render={<a href="/changelog" />}>New</Badge>

Villages

Its radius is --badge-radius: soft in Konoha, a pill in Kiri, square in Iwa, where it is also set in mono capitals.

Accessibility

• A <span>: its text is read in place. A badge that only shows a count needs the thing counted in the text around it, or an aria-label.

API reference

The props of <span>, plus render (any element, through Base UI's useRender) and:

badgeVariants({ variant, tone, size }) returns the same classes.