Badge
A badge component offering color, size, and variant options.
The Badge component is a simple yet versatile element for labeling, categorizing, or drawing attention to items in your interface. It comes with flexible size options, color themes, and allows you to tweak the borderRadius for shaping.
The Badge component is great for displaying information that is not critical but still important.
Usage
javascript
1import Badge from '@/components/atoms/Badge'; 2 3<Badge color="primary" variant="soft"> 4 Hello Badge 5</Badge>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content displayed inside the badge |
| color | string | "primary" | Base color (from tailwind.config) |
| variant | "soft" | "solid" | "soft" | Selects a muted (soft) or bold (solid) visual style |
| borderRadius | string | "full" | The tailwind-friendly rounding for corners (e.g. "md", "full", etc) |
| size | "xs" | "sm" | "md" | "lg" | "md" | Determines overall size of the badge |
| border | boolean | false | Adds a border in a complementary color |
| scale | boolean | false | If true, gently scales up on hover. |
| lift | boolean | false | If true, lifts on hover. |
| active | boolean | true | If true, the button has an active press-down scale effect. |
| onClick | function | - | If provided, the badge is clickable; includes a small press-scale animation |
| className | string | "" | Additional Tailwind classes (overrides defaults if needed) |
| ...props | object | - | Any other props you’d like to pass to the root <div> |
Examples
Basic Badges
A swift example with minimal configuration. Just drop in some content!
Different Shapes (borderRadius)
Use borderRadius to shape corners—like "none", "md", "full" (circle-like).
Tailwind’s “rounded” classes come in a bunch of variations. Pass them in as you like—maybe borderRadius="xl" for super smooth corners!
Adding Hover and Custom Classes
Spice it up your own Tailwind classes and a subtle hover animation. Great for clickable or important badges.
If you need your own styles, just add them via className.