Badge Examples

Interactive demonstrations of all badge variants and features

Color Variants

All semantic color options with gradient backgrounds for a modern look.

Primary Secondary Success Warning Danger Info Light Dark
Color Variants • HTML
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark

Style Variants

Different visual styles for different contexts.

Solid (Default)
Solid Solid Solid
Outline
Outline Outline Outline
Subtle
Subtle Subtle Subtle
Glass (on dark background)
Glass Badge Featured New
Style Variants • HTML

Outline


Subtle


Glass Badge

Size Variants

From tiny to extra large - pick the right size for your context.

Extra Small Small Default Large Extra Large
Size Variants • HTML
Extra Small
Small
Default
Large
Extra Large

Shape Variants

Pill, rounded, square, or circle for single characters.

Pill (Default) Rounded Square 5
Shape Variants • HTML
Pill (Default)
Rounded
Square
5

Badges with Icons

Combine badges with FontAwesome icons for visual context.

Approved Pending Rejected Info Featured Beta
Icons in Badges • HTML
 Approved
 Pending
 Rejected

Status Badges

Show user status with pulse animation for live indicators.

Online Away Busy Offline
Dot Indicators
Available Idle Do Not Disturb Invisible
Status Badges • HTML

Online
Away
Busy
Offline


 Available

Counter & Notification Badges

Perfect for notification counts. Try the interactive demo below!

5
12
3
JD
99+
Notification Counter • HTML

    
    5

Dismissible Badges

Users can remove these badges. Click the × to dismiss.

Technology Active Pending Review New Urgent
Dismissible Badge • HTML

    Technology

Animated Badges

Eye-catching animations to draw attention.

Live New! Premium Featured
Animated Badges • HTML
Live
New!
Premium
Featured

Gradient Badges

Beautiful pre-built gradients for a modern look.

Rainbow Sunset Ocean Forest
Gradient Badges • HTML
Rainbow
Sunset
Ocean
Forest

Badge Groups

Group badges together with different layouts.

Standard Group
React TypeScript Node.js GraphQL
Connected Group
Files 128
Stacked Group (Avatars)
JD AS MK +5
Badge Groups • HTML



    React
    TypeScript






    Files
    128






    JD
    AS
    +5

Clickable & Link Badges

Badges can be interactive links or buttons.

Link Badge Clickable Span
Clickable Badges • HTML

Link Badge






    Clickable