Components

Badge (Radix UI)

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.

Installation

pnpm dlx shadcn@latest add @toui/badge

Examples

Light

Outline

Circle

Shapes

With Dot

With Icon

Remove Button

Square

Sizes

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~~	`default`
`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~~

Credits

Built with Radix UI Slot.

On This Page

Installation
Examples
API Reference
Credits