Badge
Displays a badge or a component that looks like a badge — rounded or pill, with dots, flags, avatars, icons and a dismiss button.
Import
import {
Badge,
BadgeDot,
BadgeAvatar,
BadgeFlag,
BadgeCloseButton,
} from "@countryclub/ui-react";Variants
Sizes
Pill color
Set shape to "pill" for fully rounded badges, in every color variant.
Color
The default rounded shape with a tonal color, in three sizes.
Modern
The "modern" variant — bordered with a subtle shadow.
With dot
A status dot inherits the badge's text color via BadgeDot.
With dot badge color
The dot on the default rounded shape.
With dot badge modern
On the modern variant, recolor the dot via className (e.g. bg-success).
With flag
A round country flag via BadgeFlag and an ISO alpha-2 "country" code.
AustraliaAustraliaAustraliaWith flag badge color
The flag on the default rounded shape.
AustraliaAustraliaAustraliaWith flag badge modern
The flag on the modern variant.
AustraliaAustraliaAustraliaWith avatar
A tiny round avatar image via BadgeAvatar.
With avatar badge color
The avatar on the default rounded shape.
With avatar badge modern
The avatar on the modern variant.
With close X
A dismissible badge — BadgeCloseButton renders a small X button.
With close X badge color
The close button on the default rounded shape.
With close X badge modern
The close button on the modern variant.
With icon leading
Any icon placed before the label is sized automatically.
Color with icon leading
Leading icon on the default rounded shape.
Modern with icon leading
Leading icon on the modern variant — tint it via className.
With icon trailing
An icon placed after the label.
Color with icon trailing
Trailing icon on the default rounded shape.
Modern with icon trailing
Trailing icon on the modern variant.
With icon only
An icon with no label stays perfectly square — add an aria-label.
Color with icon only
Icon-only on the default rounded shape.
Modern with icon only
Icon-only on the modern variant.