There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

Powerful suite of Blade components for TALL Stack apps.

Badge

Badge component.

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

+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>
TallStackUI TallStackUI
<x-badge text="TallStackUi" icon="users" position="left" />
<x-badge text="TallStackUi" icon="cog" position="right" />
XS SM MD LG
<x-badge text="XS" xs />
<x-badge text="SM" sm />
<x-badge text="MD" md />
<x-badge text="LG" lg />
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" />
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 />
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 />

Code highlighting provided by Torchlight