Badge
Small labels for status, categories, and counts
Basic Usage
The most basic badge with default style:
<neura::badge>Default</neura::badge>
<neura::badge>New</neura::badge>
<neura::badge>Featured</neura::badge>Variants
Badges are available in two variants:
<neura::badge variant="solid">Solid</neura::badge>
<neura::badge variant="outline">Outline</neura::badge>Colors
All available colors for badges:
Variant Solid
Variant Outline
<neura::badge color="red">Red</neura::badge>
<neura::badge color="green">Green</neura::badge>
<neura::badge color="blue">Blue</neura::badge>
<!-- Outline variant -->
<neura::badge variant="outline" color="red">Red</neura::badge>Sizes
Badges are available in two sizes:
<neura::badge size="sm">Small</neura::badge>
<neura::badge size="lg">Large</neura::badge>Pill Style
Use the pill attribute for fully rounded badges:
<neura::badge color="blue" pill>Pill Badge</neura::badge>
<neura::badge color="green" pill>Success</neura::badge>With Icons
Add icons before or after the text:
<neura::badge color="green" icon="check">Verified</neura::badge>
<neura::badge color="blue" icon="star">Featured</neura::badge>
<neura::badge color="orange" iconAfter="arrow-right">Next</neura::badge>Status Badges
Use badges to indicate statuses:
Outline Variant
<neura::badge color="green" icon="check-circle">Active</neura::badge>
<neura::badge color="yellow" icon="clock">Pending</neura::badge>
<neura::badge color="red" icon="x-circle">Inactive</neura::badge>Count Badges
Perfect for displaying counters and notifications:
Messages
Notifications
Followers
<div class="flex items-center gap-2">
<neura::text>Messages</neura::text>
<neura::badge color="blue" pill>12</neura::badge>
</div>Category Badges
Organize your content with category badges:
Building a Modern SaaS Application
Advanced Component Architecture
<div class="flex gap-2">
<neura::badge color="blue" variant="outline">Tutorial</neura::badge>
<neura::badge color="purple" variant="outline">Laravel</neura::badge>
<neura::badge color="green" variant="outline">Livewire</neura::badge>
</div>Usage Examples
Usage examples in different contexts:
In a Card
Premium Plan
Full access to all features
In a List
Deploy to Production
Run Tests
Code Review
With Buttons
<neura::button variant="outline">
Inbox
<neura::badge color="blue" pill>24</neura::badge>
</neura::button>Use Cases
Common badge use cases:
Order Status
Priority Levels
User Roles
Content Types
Best Practices
Use consistent colors
Always use the same color for the same status (e.g., green = success, red = error)
Keep text short
Badges should contain a maximum of 1-2 words to remain readable
Use meaningful icons
Add icons to reinforce the badge message
Choose the right variant
Solid for emphasis, outline for subtlety
Use pill for counters
The pill style is perfect for notifications and counters
Color Palette
Full overview of all available colors:
Solid Variant
Outline Variant
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| variant | string | solid | Badge style (solid, outline) |
| color | string | null | Color name (red, green, blue, etc.) |
| size | string | null | Badge size (sm, lg) |
| pill | boolean | false | Fully rounded badge |
| icon | string | null | Icon name before text |
| iconAfter | string | null | Icon name after text |