Badges & Tags
Badges and Tags are compact visual elements used to label, categorize, or highlight information. While they share similarities, they serve different purposes: Badges are typically used for status indicators, counts, and quick visual cues, while Tags are used for categorization, filtering, and dismissible labels.
Badge
Quick, colorful indicators for status, counts, and highlights. Badges are compact visual cues used to surface key information—such as unread messages, statuses, or notifications. They come in various styles and colors, with support for text, icons, or dots.
Color Variants
Badges come in 10 color variants to match different contexts and meanings.
Filled Style
Light Style
Stroke Style
With Dot Indicator
Badges can include a dot indicator to draw extra attention.
With Icon
Badges can include custom icons for additional context.
Sizes
Badges come in two sizes: small and medium.
Badge Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | filled, light, stroke | filled | The visual style of the badge |
| color | red, orange, yellow, green, teal, sky, blue, purple, pink, gray | blue | The color theme |
| size | sm, md | md | The size of the badge |
| dot | boolean | false | Show a dot indicator |
| icon | React.ReactNode | - | Custom icon to display |
| children | React.ReactNode | - | Badge text content |
Tag
Tags are interactive labels used for categorization, filtering, and grouping. They support various content types including avatars, icons, logos, and flags, and can be dismissible or show counts.
Basic Tags
With Dot
Tags with a colored dot indicator for status.
With Icon
Tags with custom icons.
With User Avatar
Tags for displaying user information.
With Company Logo
Tags for displaying company/brand information.
With Country Flag
Tags for displaying country/region information.
All Variants Overview
A complete overview showing all tag variants with all states.
| Variant | Default | Dismissible | With Count |
|---|---|---|---|
| Default | Tag | Tag | Tag10 |
| Dot | Tag | Tag | Tag10 |
| Icon | Tag | Tag | Tag10 |
| User | BS Bradly Spencer | BS Bradly Spencer | BS Bradly Spencer10 |
| Company | F Figma | F Figma | F Figma10 |
| Country | Norway | Norway | Norway10 |
Tag Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default, dot, icon, user, company, country | default | The type of tag |
| icon | React.ReactNode | - | Icon for icon variant |
| avatar | React.ReactNode | - | Avatar for user variant |
| logo | React.ReactNode | - | Logo for company variant |
| flag | React.ReactNode | - | Flag for country variant |
| dotColor | string | bg-success-base | Tailwind color class for dot |
| dismissible | boolean | false | Show close button |
| count | number | - | Show count badge |
| onDismiss | () => void | - | Callback when dismissed |
| children | React.ReactNode | - | Tag text content |