Free 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@latest add badges
Badge examples
Below are examples and variations of this badge component:
LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabel
LabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelLabelAPI reference
Badge
Import Badge from @/components/base/badges/badges. Renders a <span> element.
BadgeIcon
Import BadgeIcon from @/components/base/badges/badges. Renders a <span> element.
BadgeWithDot
Import BadgeWithDot from @/components/base/badges/badges. Renders a <span> element.
BadgeWithFlag
Import BadgeWithFlag from @/components/base/badges/badges. Renders a <span> element.
BadgeWithIcon
Import BadgeWithIcon from @/components/base/badges/badges. Renders a <span> element.
BadgeWithImage
Import BadgeWithImage from @/components/base/badges/badges. Renders a <span> element.
FAQs
Please refer to our frequently asked questions page for more.
Set the color prop to "gray", "brand", "error", "warning", "success", "slate", "sky", "blue", "indigo", "purple", "pink" or "orange". The default is "gray".
Set type to "pill-color" (the default, fully rounded), "color" (rounded rectangle) or "modern" (white background with a border and a subtle shadow). On Badge, BadgeWithFlag, BadgeWithImage, BadgeWithButton and BadgeIcon, the "modern" type only supports "gray", while BadgeWithDot and BadgeWithIcon accept any color and use it for the dot or icon.
Yes. Use BadgeWithIcon with iconLeading or iconTrailing, BadgeIcon with an icon prop for an icon-only badge, or BadgeWithDot for a status dot. Pass icons as component references, for example iconLeading={ArrowUp}.
Badges support "sm", "md" and "lg" through the size prop. The default is "md".
Yes. BadgeWithImage takes an imgSrc URL, and BadgeWithFlag takes a flag country code such as "US" or "DE" (it defaults to "AU"). Both support the same size, color and type options as Badge.
Use BadgeWithButton and handle clicks with onButtonClick. It shows an X icon by default, which you can swap with the icon prop. Always pass buttonLabel, since it becomes the button's aria-label and the button has no visible text.