Badge components

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.

Yes. Every badge component (Badge, BadgeWithDot, BadgeWithIcon, BadgeWithFlag, BadgeWithImage, BadgeWithButton, BadgeIcon) spreads unrecognized props onto its root element, so title, aria-label, data-testid, and similar attributes all pass through.