Default
Slate
Gray
Zinc
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
🦄 Features
- Rich customization options with TailwindCSS preset colors.
- Beautiful shine effect.
- Utilizes XingIcon.
🧑🏫 Usage Guide
Props
typerequiredstring
Note !
If you set the badge type to beta, new, dev, official, or verified, there is no option for customization, and you do not need to add the text, color, or icon attributes to the tag. To customize your badge, simply set the type to custom.
textrequiredstring
custom.Note !
If you set the badge type to custom but forget to declare the text attribute, it will be rendered as beta type instead of your custom text, as text is required.
colorstring
zinccustom. Currently, it supports only standard TailwindCSS colors, including: slate, gray, zinc, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. iconstring
custom. This attribute is powered by XingIcon; check out XingIcon for more details. noanimatedboolean
falsenoanimated attribute to the tag, and the animation will be disabled. 🧑💻 Maintainers and Credits
- Chandara H. Wei [@nidexingg]