Badges

A comprehensive collection of 30+ customizable and interactive badge components with stunning glassy effects, animations, and modern styling.

Original Badge Variants

Badge

Soft (Default)

Solid

Outline

Dismissible

Link

Glassy Effect Badges

Glass Basic

Glass Blue

Glass Purple

Glass Green

Glass Pink

Neon Glow Badges

Neon Blue

Neon Purple

Neon Pink

Neon Green

Neon Orange

Neon Red

Gradient Badges

Ocean Blue

Purple Haze

Forest Green

Sunset Orange

Rainbow

Sunset

Frosted Glass Badges

Frosted Basic

Frosted Blue

Frosted Purple

Frosted Green

Frosted Pink

Holographic Badges

Holographic

Cyber Holo

Magic Holo

Dream Holo

Crystal Badges

Crystal Clear

Ice Crystal

Amethyst

Emerald

Rose Quartz

Icon Badges with Glass Effects

Premium

Favorite

Verified

Trending

Fast

VIP

Metallic & Luxury Badges

Silver

Gold Premium

Rose Gold

Platinum

Size Variations with Glass Effects

Extra Small

Small

Medium

Large

Extra Large

Interactive Glass Badges

Clickable Glass

Clickable Frosted

Clickable Crystal

Installation

You can add this component to your project using the CLI or by manually copying the code.

npx shadcn@latest add badge.json

Usage

after installing the component, import it into your page or component file. The Badge component is the main component that you will use. It has many props that you can use to customize it.

Props

The Badge component accepts the following props for comprehensive customization:

Prop	Type	Default	Required	Description
children	ReactNode	-	No	The content to display inside the badge
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'md'	No	Controls the size of the badge
shape	'rounded' \| 'pill' \| 'square' \| 'circle'	'rounded'	No	Defines the shape of the badge
animation	'none' \| 'pulse' \| 'bounce' \| 'float' \| 'glow' \| 'shake' \| 'rotate' \| 'scale' \| 'gradient-shift'	'none'	No	Applies animation effects to the badge
position	'static' \| 'absolute' \| 'fixed' \| 'sticky'	'static'	No	CSS position property for the badge
iconLeft	ReactElement	-	No	Icon to display on the left side of the badge content
iconRight	ReactElement	-	No	Icon to display on the right side of the badge content
badge	string \| number	-	No	Notification badge to display (e.g., count)
loading	boolean	false	No	Shows a loading spinner when true
className	string	-	No	Additional CSS classes for custom styling
style	React.CSSProperties	{}	No	Inline styles for the badge
blur	'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'	'none'	No	Backdrop blur effect intensity
opacity	number	-	No	Opacity value for the badge (0-1)
shadow	'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'inner'	'none'	No	Shadow effect for the badge
glow	boolean	false	No	Adds a glowing effect to the badge
animationDuration	'fast' \| 'normal' \| 'slow'	'normal'	No	Duration of animations and transitions
disabled	boolean	false	No	Disables the badge and applies disabled styling
active	boolean	false	No	Applies active state styling
onDismiss	(event: MouseEvent<HTMLButtonElement>) => void	-	No	Callback when dismiss button is clicked
onHover	(event: MouseEvent<HTMLElement>) => void	-	No	Callback when badge is hovered
onFocus	(event: React.FocusEvent<HTMLElement>) => void	-	No	Callback when badge receives focus
onClick	(event: MouseEvent<HTMLButtonElement>) => void	-	No	Makes badge clickable as a button
href	string	-	No	Makes badge a link to the specified URL
top	string \| number	-	No	Top position for absolute/fixed positioned badges
right	string \| number	-	No	Right position for absolute/fixed positioned badges
bottom	string \| number	-	No	Bottom position for absolute/fixed positioned badges
left	string \| number	-	No	Left position for absolute/fixed positioned badges
zIndex	number	-	No	Z-index for layering positioned badges
aria-label	string	-	No	Accessibility label for screen readers
aria-describedby	string	-	No	ID of element that describes the badge
role	string	-	No	ARIA role for accessibility

Examples

Here are some examples of how to use different props: