Badge components
FREEFree and open-source React badge components built for modern applications and websites. These badges are built using React Aria and styled with Tailwind CSS.
Installation
You can add this badge component using our CLI or manually:
npx untitledui add badges
Badge examples
Below are examples and variations of this badge component:
LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel
LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelFAQs
Please refer to our frequently asked questions page for more.
You can customize the badge color using the color prop. Available colors include "gray", "brand", "error", "warning", "success", "gray-blue", "blue-light", "blue", "indigo", "purple", "pink", and "orange". The default color is "gray".
There are three badge types: "pill-color" (rounded pill shape), "badge-color" (rounded rectangle), and "badge-modern" (modern style with shadow). You can set the type using the type prop, with "pill-color" being the default.
Yes, you can add icons using BadgeWithIcon component with iconLeading and iconTrailing props, or use BadgeIcon for icon-only badges. You can also use BadgeWithDot to add a status dot indicator.
Badges support three sizes: "sm" (small), "md" (medium), and "lg" (large). You can set the size using the size prop, with "md" being the default size.
Yes, you can use BadgeWithImage to add custom images using the imgSrc prop, or BadgeWithFlag to add country flags using the flag prop. These components support the same sizing and color options as regular badges.
You can use BadgeWithButton to add interactive elements like close buttons. Use the onButtonClick prop to handle click events and buttonLabel for accessibility. The component automatically includes a close icon.