React Tags Component Demo
Basic Colors
Blue TagGreen TagRed TagYellow TagPurple TagIndigo TagPink TagGray TagOrange TagTeal TagBlack TagWhite Tag
Custom Colors
Customize text and background colors separately
Custom Text OnlyCustom BackgroundFully CustomText Only
Closable Tags
Direct CloseFade OutClose with Alert
Different Sizes
Small TagMedium TagLarge Tag
Tags with Icons
GitHubFavoriteTag
Gradient Effects
Blue GradientPurple GradientSunset GradientAurora Gradient
Font Styles
Normal TagItalic TagLarge BoldCustom Font
Border Styles
No BorderThick BorderRounded TagCustom Border
Opacity and Shadow
Set tag opacity (0-100) and shadow effects
100% Opaque70% Opacity40% OpacityWith ShadowOpacity + Shadow
Hover Effects
Different mouse hover interactions
Pointer StyleScale EffectShine EffectScale + Shine
Event Handling
Event handling demonstration
Stop PropagationGet Event InfoCustom Callback
Child Elements and Style Props
Demonstrating child elements and custom styles
Custom Style TagClickable TagGoogle Scholar
Event Handling Examples
Demonstrating event handling and bubble control
Click tag to test event bubbling (tag prevents bubbling to parent)
Stop Bubbling Example