WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Badge

Badge component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# Basic Usage

TallStackUI 
<x-badge text="TallStackUi" />

# Square Variation

TallStackUI 
<x-badge text="TallStackUi" square />

# Round Variation

Boolean enables rounded-full. The prop also accepts the size keys xs, sm, md, lg, xl to apply the matching rounded-{size} utility. Without the prop, the badge falls back to rounded-md. The square attribute still wins over round, removing the radius entirely.

Full xs sm md lg xl default 
<!-- Boolean: applies rounded-full -->
<x-badge text="Full" round />
 
<!-- Size keys: xs, sm, md, lg, xl -->
<x-badge text="xs" round="xs" />
<x-badge text="sm" round="sm" />
<x-badge text="md" round="md" />
<x-badge text="lg" round="lg" />
<x-badge text="xl" round="xl" />
 
<!-- Without the prop, the badge falls back to rounded-md -->
<x-badge text="default" />

# Left & Right Slots

+99

TallStackUI TallStackUI

+99

 
<x-badge lg>
    <x-slot:left>
        <p class="text-yellow-300 text-xs mr-2">+99</p>
    </x-slot:left>
    TallStackUI
</x-badge>
<x-badge lg>
    <x-slot:right>
        <p class="text-yellow-300 text-xs ml-2">+99</p>
    </x-slot:right>
    TallStackUI
</x-badge>

# Icon Slot

TallStackUI TallStackUI 
<x-badge text="TallStackUi" icon="users" position="left" />
<x-badge text="TallStackUi" icon="cog" position="right" />

# Size Variations

XS SM MD LG 
<x-badge text="XS" xs />
<x-badge text="SM" sm />
<x-badge text="MD" md />
<x-badge text="LG" lg />

# Color Variations

Primary Secondary Slate Gray Zinc Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose Mauve Olive Mist Taupe Black 
<x-badge text="Primary" />
<x-badge text="Secondary" color="secondary" />
<x-badge text="Slate" color="slate" />
<x-badge text="Gray" color="gray" />
<x-badge text="Zinc" color="zinc" />
<x-badge text="Neutral" color="neutral" />
<x-badge text="Stone" color="stone" />
<x-badge text="Red" color="red" />
<x-badge text="Orange" color="orange" />
<x-badge text="Amber" color="amber" />
<x-badge text="Yellow" color="yellow" />
<x-badge text="Lime" color="lime" />
<x-badge text="Green" color="green" />
<x-badge text="Emerald" color="emerald" />
<x-badge text="Teal" color="teal" />
<x-badge text="Cyan" color="cyan" />
<x-badge text="Sky" color="sky" />
<x-badge text="Blue" color="blue" />
<x-badge text="Indigo" color="indigo" />
<x-badge text="Violet" color="violet" />
<x-badge text="Purple" color="purple" />
<x-badge text="Fuchsia" color="fuchsia" />
<x-badge text="Pink" color="pink" />
<x-badge text="Rose" color="rose" />
<x-badge text="Mauve" color="mauve" />
<x-badge text="Olive" color="olive" />
<x-badge text="Mist" color="mist" />
<x-badge text="Taupe" color="taupe" />
<x-badge text="Black" color="black" />

# Light Variations

Primary Secondary Slate Gray Zinc Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose Mauve Olive Mist Taupe Black 
<x-badge text="Primary" light />
<x-badge text="Secondary" color="secondary" light />
<x-badge text="Slate" color="slate" light />
<x-badge text="Gray" color="gray" light />
<x-badge text="Zinc" color="zinc" light />
<x-badge text="Neutral" color="neutral" light />
<x-badge text="Stone" color="stone" light />
<x-badge text="Red" color="red" light />
<x-badge text="Orange" color="orange" light />
<x-badge text="Amber" color="amber" light />
<x-badge text="Yellow" color="yellow" light />
<x-badge text="Lime" color="lime" light />
<x-badge text="Green" color="green" light />
<x-badge text="Emerald" color="emerald" light />
<x-badge text="Teal" color="teal" light />
<x-badge text="Cyan" color="cyan" light />
<x-badge text="Sky" color="sky" light />
<x-badge text="Blue" color="blue" light />
<x-badge text="Indigo" color="indigo" light />
<x-badge text="Violet" color="violet" light />
<x-badge text="Purple" color="purple" light />
<x-badge text="Fuchsia" color="fuchsia" light />
<x-badge text="Pink" color="pink" light />
<x-badge text="Rose" color="rose" light />
<x-badge text="Mauve" color="mauve" light />
<x-badge text="Olive" color="olive" light />
<x-badge text="Mist" color="mist" light />
<x-badge text="Taupe" color="taupe" light />
<x-badge text="Black" color="black" light />

# Outline Variations

Primary Secondary Slate Gray Zinc Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose Mauve Olive Mist Taupe Black 
<x-badge text="Primary" outline />
<x-badge text="Secondary" color="secondary" outline />
<x-badge text="Slate" color="slate" outline />
<x-badge text="Gray" color="gray" outline />
<x-badge text="Zinc" color="zinc" outline />
<x-badge text="Neutral" color="neutral" outline />
<x-badge text="Stone" color="stone" outline />
<x-badge text="Red" color="red" outline />
<x-badge text="Orange" color="orange" outline />
<x-badge text="Amber" color="amber" outline />
<x-badge text="Yellow" color="yellow" outline />
<x-badge text="Lime" color="lime" outline />
<x-badge text="Green" color="green" outline />
<x-badge text="Emerald" color="emerald" outline />
<x-badge text="Teal" color="teal" outline />
<x-badge text="Cyan" color="cyan" outline />
<x-badge text="Sky" color="sky" outline />
<x-badge text="Blue" color="blue" outline />
<x-badge text="Indigo" color="indigo" outline />
<x-badge text="Violet" color="violet" outline />
<x-badge text="Purple" color="purple" outline />
<x-badge text="Fuchsia" color="fuchsia" outline />
<x-badge text="Pink" color="pink" outline />
<x-badge text="Rose" color="rose" outline />
<x-badge text="Mauve" color="mauve" outline />
<x-badge text="Olive" color="olive" outline />
<x-badge text="Mist" color="mist" outline />
<x-badge text="Taupe" color="taupe" outline />
<x-badge text="Black" color="black" outline />

Code highlighting provided by Torchlight