Components
YA Badge
Badge component for labels, tags, and status indicators with semantic colors and pill variants
The YaBadge component displays small labels for categorization, status, or removable tags. It supports two types: default for static labels with semantic colors, and pill for removable tags with close functionality.
Quick Start
pnpm dlx shadcn@latest add @yavendio/ya-badgenpx shadcn@latest add @yavendio/ya-badgeyarn dlx shadcn@latest add @yavendio/ya-badgeimport { YaBadge } from '@/components/ui/ya-badge'
export default function Example() {
return <YaBadge>Label</YaBadge>
}Types
Two badge types for different use cases.
Default Type
Static labels with rounded corners and shadow. Ideal for status indicators and categories.
Black
Neutral
Outline
Destructive
<YaBadge appearance="black">Black</YaBadge>
<YaBadge appearance="neutral">Neutral</YaBadge>
<YaBadge appearance="outline">Outline</YaBadge>
<YaBadge appearance="destructive">Destructive</YaBadge>Pill Type
Fully rounded badges, typically used for removable tags.
Primary
Plum 100
Plum 200
Black
Neutral
<YaBadge type="pill" appearance="primary">Primary</YaBadge>
<YaBadge type="pill" appearance="plum-100">Plum 100</YaBadge>
<YaBadge type="pill" appearance="plum-200">Plum 200</YaBadge>
<YaBadge type="pill" appearance="black">Black</YaBadge>
<YaBadge type="pill" appearance="neutral">Neutral</YaBadge>Semantic Colors
Nine semantic color options for categorization and visual distinction.
Indigo
Teal
Violet
Sienna
Forest
Olive
Caramel
Red Clay
Red Alert
| Appearance | Use Case |
|---|---|
indigo | Information, links |
teal | Communication, messaging |
violet | Creative, premium |
sienna | Warnings, caution |
forest | Success, completed |
olive | Nature, organic |
caramel | Pending, in progress |
red-clay | Errors, attention |
red-alert | Critical, destructive |
<YaBadge appearance="indigo">Indigo</YaBadge>
<YaBadge appearance="forest">Forest</YaBadge>
<YaBadge appearance="red-alert">Red Alert</YaBadge>Sizes
Two sizes for different contexts.
Small
Default
| Size | Padding | Font Size | Usage |
|---|---|---|---|
sm | 6px 8px | 12px | Compact UIs, tables |
default | 8px 12px | 12px | Standard badges |
<YaBadge size="sm">Small</YaBadge>
<YaBadge size="default">Default</YaBadge>With Icons
Add icons before or after the badge text.
Featured
Verified
Saved
import { Star, Check, Bookmark } from 'lucide-react'
<YaBadge leftIcon={<Star />}>Featured</YaBadge>
<YaBadge rightIcon={<Check />}>Verified</YaBadge>
<YaBadge leftIcon={<Bookmark />} rightIcon={<Star />}>Saved</YaBadge>Selected State
Highlight selected badges with a ring indicator.
Selected
Selected Indigo
Click to Select
<YaBadge selected>Selected</YaBadge>
<YaBadge appearance="indigo" selected>Selected Indigo</YaBadge>Disabled State
Reduce opacity and disable interactions.
Disabled
Disabled Indigo
Disabled Pill
<YaBadge disabled>Disabled</YaBadge>
<YaBadge appearance="indigo" disabled>Disabled</YaBadge>Removable Pills
Use onClose prop to make pill badges removable.
React
TypeScript
Tailwind
const [tags, setTags] = useState(['React', 'TypeScript', 'Tailwind'])
{tags.map((tag) => (
<YaBadge
key={tag}
type="pill"
appearance="primary"
onClose={() => setTags(tags.filter(t => t !== tag))}
>
{tag}
</YaBadge>
))}All Appearances
Default Type
black
neutral
outline
destructive
indigo
teal
violet
sienna
forest
olive
caramel
red-clay
red-alert
Pill Type
primary
plum-100
plum-200
black
neutral
Examples
Status Badges
Completed
Pending
Failed
import { Check, Clock, AlertCircle } from 'lucide-react'
<YaBadge appearance="forest" leftIcon={<Check />}>Completed</YaBadge>
<YaBadge appearance="caramel" leftIcon={<Clock />}>Pending</YaBadge>
<YaBadge appearance="destructive" leftIcon={<AlertCircle />}>Failed</YaBadge>Category Tags
Electronics
Fashion
Home
Beauty
import { Tag } from 'lucide-react'
<YaBadge appearance="indigo" leftIcon={<Tag />}>Electronics</YaBadge>
<YaBadge appearance="teal" leftIcon={<Tag />}>Fashion</YaBadge>
<YaBadge appearance="sienna" leftIcon={<Tag />}>Home</YaBadge>Tag Input
design
ui
ux
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'default' | 'pill' | 'default' | Badge shape type |
appearance | See below | 'neutral' | Visual style |
size | 'sm' | 'default' | 'default' | Badge size |
selected | boolean | false | Show selection ring |
disabled | boolean | false | Disable badge |
leftIcon | ReactNode | - | Icon on the left |
rightIcon | ReactNode | - | Icon on the right |
onClose | () => void | - | Close handler (pill type shows X icon) |
asChild | boolean | false | Render as child element |
className | string | - | Additional classes |
Appearance Values
Default type: black, neutral, outline, destructive, indigo, teal, violet, sienna, forest, olive, caramel, red-clay, red-alert
Pill type: primary, plum-100, plum-200, black, neutral
Composition with asChild
Use asChild to render the badge as a different element, like a link.
import Link from 'next/link'
<YaBadge asChild appearance="indigo">
<Link href="/category/electronics">Electronics</Link>
</YaBadge>Accessibility
Best Practices
| Do | Don't |
|---|---|
| Use semantic colors consistently | Mix colors randomly |
Use pill type for removable tags | Use default type with onClose |
| Keep badge text concise | Long text in badges |
| Use icons to reinforce meaning | Icons without purpose |
| Group related badges together | Scatter badges across UI |
TypeScript
import { type VariantProps } from 'class-variance-authority'
import { yaBadgeVariants } from '@/components/ui/ya-badge'
type BadgeType = VariantProps<typeof yaBadgeVariants>['type']
type BadgeAppearance = VariantProps<typeof yaBadgeVariants>['appearance']