Badge
React Badge components are used to display small labels, counts, status indicators, or metadata with semantic colors and optional icons. They are commonly used for notifications, categories, tags, and metadata across interfaces.
This Badge component is built with React and styled using Tailwind CSS, giving developers control over size, color, and icon placement.
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add badgeUsage
Import the component and pass the required props.
import { Badge } from "@/components/badge";
export const BadgeExample = () => <Badge color="primary">New</Badge>;Examples
Sizes
Badge component supports three predefined sizes: sm, md, and lg.
Colors
The Badge component supports a wide range of semantic and vibrant color options like primary, error, and success etc.
With Icons
Add icons before or after your text using the prefixIcon and suffixIcon props.
Custom
Use custom styles or positioning to create unique badges for specific use cases.
API Reference
Badge
Extends span element props.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm', 'md', 'lg' | 'sm' | Sets the badge size |
color | 'gray', 'primary', 'error', 'warning', 'success', 'cyan', 'sky', 'blue', 'violet', 'purple', 'pink', 'rose', 'orange' | 'primary' | Sets the color scheme |
prefixIcon | React.ReactNode | - | Icon before the text |
suffixIcon | React.ReactNode | - | Icon after the text |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Badge content |
Notes
- Icons are automatically sized to
12px(0.75rem) via the[&>svg]:size-3class - Padding adjusts automatically based on the presence of prefix/suffix icons
- All standard
spanHTML attributes are supported