Badge

Badge component.

Badge, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->badge()
    ->block('block', 'classes');

WARNING!

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

# Basic Usage

TallStackUI

<x-badge text="TallStackUi" />

# Square Variation

TallStackUI

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

# Round Variation

TallStackUI

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

# 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 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="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 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="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 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="Black" color="black" outline />