Components

Badge

A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design.

@radix-ui/react-slot

Installation

pnpm dlx shadcn@latest add https://reui.io/r/badge.json

Examples

Default

Stroke

Variants

Outline

Light

Circle

With Dot

With Icon

Remove Button

Square

Size

asChild

Disabled

API Reference

This component provides a customizable badge system with flexible variants, sizes, and appearances.

Badge

Prop	Type	Default
`variant`	~~enum~~	`secondary`
`appearance`	~~enum~~	`solid`
`size`	~~enum~~	`md`
`shape`	~~enum~~	`default`
`disabled`	~~boolean~~	`false`
`asChild`	~~boolean~~	`false`
`className`	~~string~~

BadgeButton

Prop	Type	Default
`variant`	~~enum~~	`default`
`asChild`	~~boolean~~	`false`
`className`	~~string~~

BadgeDot

Prop	Type	Default
`className`	~~string~~

PreviouseAvatar NextBreadcrumb