Back to documentation

distortedfusion/laravel-tailwind-layout

Laravel Tailwind Layout

Badges

A contained label that shows the status of an element, emphasizes an element, or helps categorize an element with other similar elements.

Variants

<div class="flex items-center space-x-4">
    <x-badge style="success">Badge Text</x-badge>
    <x-badge style="info">Badge Text</x-badge>
    <x-badge style="warning">Badge Text</x-badge>
    <x-badge style="danger">Badge Text</x-badge>
    <x-badge style="default">Badge Text</x-badge>
</div>

Sizes

<div class="flex items-center space-x-4">
    <x-badge size="lg">Badge Text</x-badge>
    <x-badge>Badge Text</x-badge>
    <x-badge size="sm">Badge Text</x-badge>
</div>

With Icons

<div class="flex items-center space-x-4">
    <x-badge icon="fal-circle-check" style="success">Badge Text</x-badge>
    <x-badge icon="fal-circle-xmark" style="danger">Badge Text</x-badge>
    <x-badge icon="fal-circle-info" style="default">Badge Text</x-badge>
</div>

Interested in what we can do for your business?

Get in touch
Flushing, The Netherlands contact@distortedfusion.com
Chamber Of Commerce
74088041
VAT
NL002267401B33
GitHub
Twitter
LinkedIn

//
distortedfusion/laravel-tailwind-layout

Copyright © 2024 Distorted Fusion - All rights reserved.