Badge

Badges are used to highlight status, categories, or small pieces of information.

Installation

Add the badge component to your project:

npx velyx@latest add badge

pnpm dlx velyx@latest add badge

yarn dlx velyx@latest add badge

bunx --bun velyx@latest add badge

Usage

Default Badge

<x-ui.badge>Badge</x-ui.badge>

Variants

<x-ui.badge>Default</x-ui.badge>

<x-ui.badge variant="primary">Primary</x-ui.badge>

<x-ui.badge variant="secondary">Secondary</x-ui.badge>

<x-ui.badge variant="destructive">Destructive</x-ui.badge>

<x-ui.badge variant="outline">Outline</x-ui.badge>

Sizes

<x-ui.badge size="sm">Small</x-ui.badge>

<x-ui.badge>Default</x-ui.badge>

<x-ui.badge size="lg">Large</x-ui.badge>

Pill Shape

<x-ui.badge pill>Pill Badge</x-ui.badge>

<x-ui.badge variant="primary" pill>Primary Pill</x-ui.badge>

<x-ui.badge variant="destructive" pill>Destructive Pill</x-ui.badge>

With Icon

<x-ui.badge variant="primary" icon="check">Verified</x-ui.badge>

<x-ui.badge variant="secondary" icon="sparkles">Featured</x-ui.badge>

<x-ui.badge variant="primary" icon="sparkles">New</x-ui.badge>

Removable

<x-ui.badge removable>Removable Badge</x-ui.badge>

<x-ui.badge variant="primary" removable>Filter</x-ui.badge>

Custom Labels

<x-ui.badge>New</x-ui.badge>

<x-ui.badge variant="primary">Featured</x-ui.badge>

<x-ui.badge variant="error">Sold Out</x-ui.badge>

Props

Examples

Status Indicators

<div class="flex items-center gap-2">
    <span>Account Status:</span>
    <x-ui.badge variant="success">Active</x-ui.badge>
</div>

<div class="flex items-center gap-2">
    <span>Payment Status:</span>
    <x-ui.badge variant="destructive">Overdue</x-ui.badge>
</div>

<div class="flex items-center gap-2">
    <span>Verification:</span>
    <x-ui.badge variant="primary" icon="check">Verified</x-ui.badge>
</div>

Filter Tags

<div class="flex items-center gap-2">
    <x-ui.badge variant="secondary" removable>Category</x-ui.badge>
    <x-ui.badge variant="secondary" removable>Price Range</x-ui.badge>
    <x-ui.badge variant="secondary" removable>Brand</x-ui.badge>
</div>

Product Tags

<div class="flex items-center gap-2">
    <x-ui.badge variant="primary" pill>New</x-ui.badge>
    <x-ui.badge variant="success" pill>In Stock</x-ui.badge>
    <x-ui.badge variant="outline" pill>On Sale</x-ui.badge>
</div>

Notification Badges

<div class="relative">
    <button>
        Notifications
    </button>

    <x-ui.badge variant="destructive" class="absolute -top-2 -right-2">3</x-ui.badge>
</div>

Counters

<div class="flex items-center gap-4">
    <div>
        <p class="text-sm text-muted-foreground">Tasks</p>
        <x-ui.badge size="lg" variant="primary">12</x-ui.badge>
    </div>

    <div>
        <p class="text-sm text-muted-foreground">Messages</p>
        <x-ui.badge size="lg" variant="secondary">5</x-ui.badge>
    </div>

    <div>
        <p class="text-sm text-muted-foreground">Alerts</p>
        <x-ui.badge size="lg" variant="destructive">2</x-ui.badge>
    </div>
</div>

Accessibility

Badge components include proper ARIA attributes:

• Semantic HTML structure
• Clear visual contrast ratios
• Proper text scaling for different sizes
• Accessible color combinations

Customization

The badge component uses Tailwind CSS classes. You can customize the appearance by modifying the component in your project:

@

@props([
    'variant' => 'default',
    'size' => 'md',
    'pill' => false,
    'icon' => null,
    'removable' => false,
])

// Customize variants, sizes, and styles

Variant Styles

Icon Integration

The badge component integrates with your icon system. Any icon name available in your project can be used:

<x-ui.badge icon="star">Featured</x-ui.badge>
<x-ui.badge icon="heart">Liked</x-ui.badge>
<x-ui.badge icon="bookmark">Saved</x-ui.>

## Next Steps

- Explore [Alert component](/docs/components/alert)
- Learn about [Button component](/docs/components/button)
- View [Breadcrumbs component](/docs/components/breadcrumbs)