Verify Badge

A customizable verification badge component featuring SVG icons, glassmorphism effects, and variants for basic, gold, and premium statuses for profile, statement, and more verification types.

Verified

Gold Verified

Premium Verified

basic:

Verified

gold:

Gold Verified

premium:

Premium Verified

Verified

Gold Verified

Premium Verified

Verify Profile

Mahmud Rahman

Full-Stack JS Developer

Verified

Gold Verified

Premium Verified

Usage

Props

Prop	Type	Default	Required	Description
type	'basic' \| 'gold' \| 'premium'	-	No	Badge variant to represent different user tiers
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	No	Defines the size of the badge
showLabel	boolean	true	No	Toggle visibility of the badge's label text
animate	boolean	true	No	Enables animation effects on hover
className	string	-	No	Additional Tailwind CSS classes for customization
onClick	() => void	-	No	Callback function triggered on badge click
position	'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'	'top-right'	No	Floating position for the badge

Accessibility

Semantic div with role="button" and tabIndex for clickable badges
ARIA-compatible for screen readers
Keyboard navigation support with onClick

Styling

Uses Tailwind CSS for responsive design
Supports dark mode with dark: classes
Glassmorphic effects with backdrop-blur-md
Smooth hover animations with transition-all