Badge
A contained label that shows the status of an element, emphasizes an element, or helps categorize an element with other similar elements.
<x-badge>Badge</x-badge>
<x-badge>Badge</x-badge>
| Attribute |
Default |
Description |
style |
primary |
string
Possible values primary, secondary, success, info, warning or danger. |
icon |
null |
string || null |
Control the badge style by supplying the style="" attribute.
<div class="flex flex-col lg:flex-row items-center justify-between space-y-2 lg:space-y-0 lg:space-x-4">
<x-badge>Badge Text</x-badge>
<x-badge style="secondary">Badge Text</x-badge>
<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>
</div>
<div class="flex flex-col lg:flex-row items-center justify-between space-y-2 lg:space-y-0 lg:space-x-4">
<x-badge>Badge Text</x-badge>
<x-badge style="secondary">Badge Text</x-badge>
<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>
</div>
You can control the icon per badge instance by supplying the icon="" attribute. Any blade-ui-kit/blade-icons compatible icon set can be used.
<div class="flex justify-center">
<x-badge icon="heroicon-o-star">Badge</x-badge>
</div>
<div class="flex justify-center">
<x-badge icon="heroicon-o-star">Badge</x-badge>
</div>