Fluxtor

Ask AI about this page

Introduction

The Badge component is a versatile labeling component designed to highlight status, categories, or other important metadata. It provides multiple visual variants, extensive color options, and flexible icon support for creating informative and visually appealing badges.

Installation

Use the fluxtor artisan command to install the badge component easily:

php artisan fluxtor:install badge

Once installed, you can use the <x-ui.badge /> component in any Blade view.

Usage

Basic Badge Variants

The badge component supports two main visual variants with different corner radius styles.

<!-- Default rounded badge -->
<x-ui.badge>Default Badge</x-ui.badge>

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

Badge Sizes

Choose from three different sizes to match your design hierarchy and context.

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

<!-- Default size badge -->
<x-ui.badge>Default Badge</x-ui.badge>

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

Color Variants - Solid Style (Default)

The solid style provides bold, high-contrast badges with white text on colored backgrounds.

<!-- Solid style badges (default) -->
<x-ui.badge>Default</x-ui.badge>
<x-ui.badge color="red">Red</x-ui.badge>
<x-ui.badge color="green">Green</x-ui.badge>
<x-ui.badge color="blue">Blue</x-ui.badge>
<x-ui.badge color="purple">Purple</x-ui.badge>

Color Variants - Outline Style

The outline style provides colored text and border.

<!-- Outline style badges -->
<x-ui.badge variant="outline">Default</x-ui.badge>
<x-ui.badge variant="outline" color="red">Red</x-ui.badge>
<x-ui.badge variant="outline" color="green">Green</x-ui.badge>
<x-ui.badge variant="outline" color="blue">Blue</x-ui.badge>
<x-ui.badge variant="outline" color="purple">Purple</x-ui.badge>

Badges with Icons

Add leading icons to provide visual context and improve recognition.

<!-- Badges with leading icons -->
<x-ui.badge icon="check-circle" color="green">Completed</x-ui.badge>
<x-ui.badge icon="clock" color="amber">Pending</x-ui.badge>
<x-ui.badge icon="x-circle" color="red">Failed</x-ui.badge>
<x-ui.badge icon="star" color="yellow" variant="outline">Featured</x-ui.badge>

Badges with Trailing Icons

Use trailing icons for actions like removal or additional information.

<!-- Badges with trailing icons -->
<x-ui.badge iconAfter="x-mark" color="blue">JavaScript</x-ui.badge>
<x-ui.badge iconAfter="chevron-down" color="purple">More Options</x-ui.badge>

<!-- Badge with both leading and trailing icons -->
<x-ui.badge icon="tag" iconAfter="x-mark" color="green" variant="outline" pill>Design</x-ui.badge>

Icon Variants

Control the icon style using the iconVariant prop, supporting both micro and outline styles.

<!-- Micro icon variant (default) -->
<x-ui.badge icon="heart" iconVariant="micro" color="red">Micro Icon</x-ui.badge>

<!-- Outline icon variant -->
<x-ui.badge icon="heart" iconVariant="outline" color="red">Outline Icon</x-ui.badge>

Interactive Badges

Badges can function as buttons with hover states when appropriate attributes are applied.

<!-- Interactive badges with hover effects -->
<x-ui.badge onclick="alert('Badge clicked!')" color="blue" class="cursor-pointer">
    Clickable Badge
</x-ui.badge>

<x-ui.badge onclick="alert('Remove tag')" icon="tag" iconTrailing="x-mark" color="green" pill class="cursor-pointer">
    Remove Tag
</x-ui.badge>

Status Badge Examples

Common usage patterns for status indicators and labels.

Order Status:

Priority:

Tags:

<!-- Status indicators -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Order Status:</span>
    <x-ui.badge icon="truck" color="blue" variant="outline">Shipped</x-ui.badge>
</div>

<!-- Priority levels -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Priority:</span>
    <x-ui.badge color="red" size="sm">High</x-ui.badge>
    <x-ui.badge color="amber" size="sm">Medium</x-ui.badge>
    <x-ui.badge color="green" size="sm">Low</x-ui.badge>
</div>

<!-- Removable tags -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Tags:</span>
    <x-ui.badge pill iconTrailing="x-mark" color="purple">React</x-ui.badge>
    <x-ui.badge pill iconTrailing="x-mark" color="blue">TypeScript</x-ui.badge>
    <x-ui.badge pill iconTrailing="x-mark" color="green">Tailwind</x-ui.badge>
</div>

Component Props Reference

Badge Props

Prop	Type	Default	Description
`variant`	`string`	`solid`	Visual variant: `'solid'` for fully solid, `outline` for outline style
`color`	`string`	`null`	Color theme: `'red'`, `'green'`, `'blue'`, `'purple'`, `'amber'`, `'yellow'`, `'lime'`, `'emerald'`, `'teal'`, `'cyan'`, `'sky'`, `'indigo'`, `'violet'`, `'fuchsia'`, `'pink'`, `'rose'`, `'orange'`
`size`	`string`	`null`	Size variant: `'sm'`, `null` (default), `'lg'`
`icon`	`string\|mixed`	`null`	Leading icon name or custom icon content
`iconTrailing`	`string\|mixed`	`null`	Trailing icon name or custom icon content
`iconVariant`	`string`	`'micro'`	Icon style: `'micro'`, `'outline'`
`pill`	`bool`	`'false'`	for full rounded: `'false'`, `'true'`, `'null'`

Styling Variants

Style Variants

The component automatically applies different styles based on the presence of a variant prop:

Style	When Applied	Appearance
solid	Default (no variant specified)	Bold colored background with white text
Outline	When `variant="outline"`	for outline style with colored text and border

Size Options

Size	Text Size	Vertical Padding	Use Case
`'sm'`	`text-xs`	`py-1`	Compact spaces, inline with small text
`null` (default)	`text-sm`	`py-1`	Standard usage, most common
`'lg'`	`text-sm`	`py-1.5`	Emphasis, standalone badges

Fluxtor

#Introduction

#Installation

#Usage

#Basic Badge Variants

#Badge Sizes

#Color Variants - Solid Style (Default)

#Color Variants - Outline Style

#Badges with Icons

#Badges with Trailing Icons

#Icon Variants

#Interactive Badges

#Status Badge Examples

#Component Props Reference

#Badge Props

#Styling Variants

#Style Variants

#Size Options