variant- Type
"default" | "secondary" | "outline" | "success" | "warning" | "info" | "destructive"- Default
"default"- Description
- Visual style.
Components / Display
Badge
சின்னக்குறி
Badges are compact labels that communicate status, category, or count. They are non-interactive by default.
சின்னக்குறிகள் நிலை, வகை அல்லது எண்ணிக்கையை தெரிவிக்கும் சிறிய லேபிள்கள்.
Variants
Component preview
Badge variantsவடிவங்கள்With count
Component preview
Count badgesஎண்ணிக்கை குறிகள்Anatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Container
கொள்கலன்required<span>Pill-shaped inline wrapper with border and tinted background. Height is fixed (h-5 for default). Padding is tight (px-2 py-0.5). The variant prop controls the color scheme — default, secondary, outline, success, warning, info, or destructive.
2
Label text
லேபிள்requiredShort status or category text. Maximum 2-3 words — never a full sentence. Font size is 12px (text-xs) with medium weight. For Tamil labels, apply font-tamil. Examples: 'செயலில்' (Active), 'நிலுவையில்' (Pending), 'முடிந்தது' (Done). For bilingual, use 'செயலில் / Active'.
3
Optional icon
விரும்பிய சின்னம்svgSmall 12×12px icon placed before the label for added semantic context. Use sparingly — only when the icon meaningfully reinforces the status (a check for 'Done', a clock for 'Pending'). Sized smaller than button icons to match badge density.
API
Props
className- Type
string- Default
- -
- Description
- Merge additional Tailwind classes.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "success" | "warning" | "info" | "destructive" | "default" | Visual style. |
className | string | - | Merge additional Tailwind classes. |
Usage guidance
- Keep badge text under 3 words. Use Tamil for Tamil-primary UIs.
- Never use badge as the only status communicator — pair with visible text near the badge.
- Count badges over 99 should show 99+, not the full number.
Best practices
Keep badge text 1–3 words with semantic color
1–3 சொற்கள் மட்டும் வைத்து பொருத்தமான நிறம் பயன்படுத்தவும்
Badge text should be short and scannable; use semantic color tokens so status is immediately clear.
சின்னக்குறி உரை சுருக்கமாகவும் பொருத்தமான நிறத்திலும் இருக்க வேண்டும்.
Don't write full sentences inside a badge
சின்னக்குறிக்குள் முழு வாக்கியம் எழுதாதே
A full sentence inside a badge overflows the layout and is impossible to scan at a glance.
முழு வாக்கியம் உள்ள சின்னக்குறி வடிவமைப்பை சிதைத்து விரைவாக படிக்க முடியாமல் போகும்.
Cap count badges at 99+
எண்ணிக்கை 99-க்கு அதிகமாக இருந்தால் 99+ காட்டவும்
Showing '99+' keeps the badge compact and avoids layout overflow for large counts.
100, 1000 என்று காட்டுவதை விட 99+ காட்டுவது சின்னக்குறியை சிறிதாக வைக்கும்.
Don't use badge as the only status indicator
சின்னக்குறியை மட்டுமே நிலை குறிப்பாக பயன்படுத்தாதே
Color alone is not accessible — always pair the badge with visible text to communicate status.
நிறம் மட்டுமே அணுகல் தன்மை அளிக்காது — பொருத்தமான உரையுடன் இணைக்கவும்.