Badge

Small labels with hard shadows for status and categorization. Like index card tabs, each badge is a quick visual identifier with bold, punchy styling.

Variants

DefaultSecondaryOutlineDestructiveSuccessWarning

Animated Badges

LiveNewHot3 AlertsFavoriteTrendingLoading...

Custom Colors

Override default styles with custom backgrounds, borders, and shadows.

PinkCyanOrangeIndigoLimeRoseTealFuchsia

Gradient Badges

PremiumProHot DealFreeVIP

Interactive Badges

Badges with hover and click effects for clickable labels.

Click MeHoverablePop UpRemove

With Icons

VerifiedFeaturedPendingRejectedActive

Status Badges

PublishedArticle is live and visible to readers

DraftStill being worked on

ArchivedNo longer active but preserved

DeletedScheduled for permanent removal

Category Tags

DesignDevelopmentMarketingProductEngineeringSalesSupportFinance

Pricing Badges

Starter

Free

Perfect for trying out

Pro

Popular

For growing teams

Enterprise

Custom

For large organizations

In Context

Design System Setup

2024-01-15

Complete

Component Library

2024-01-20

In Progress

Documentation

2024-02-01

Upcoming

Multiple Badges

TypeScriptReactNext.jsTailwind

Modern Web Application

A full-stack application built with the latest technologies and best practices.