Badge Component

A small status indicator component for highlighting important information. Perfect for labels, counts, and status indicators.

Basic Badge

A simple badge with default styling.

Default
Secondary
Outline
Ghost

Variants

Different badge styles for various use cases.

Default

Default

Secondary

Secondary

Destructive

Destructive

Warning

Warning

Success

Success

Outline

Outline

Ghost

Ghost

Sizes

Different badge sizes for various contexts.

Small
Medium
Large

Colors

Beautiful color options from the Catppuccin palette.

Mauve

Mauve

Blue

Blue

Pink

Pink

Green

Green

Teal

Teal

Red

Red

Yellow

Yellow

Lavender

Lavender

Real-world Examples

Common badge patterns used in applications.

Status Indicators

Active
Pending
Error
Draft

Notification Counts

Messages
3
Notifications
12
Updates
5

Feature Tags

New
Beta
Pro
Free

User Roles

Admin
Editor
Viewer
Banned

Card with Badge

Project Alpha

Completed

A new project management tool

This project has been successfully completed and is now live.

Installation

npx shadcn@latest add https://catppuccin-components.vercel.app/r/badge.json