Badge
A contained label that shows the status of an element, emphasizes an element, or helps categorize an element with other similar elements.
Control the badge size by setting the size attribute.
<div class="flex items-start justify-center gap-8 max-md:flex-col">
<x-badge style="secondary" size="sm">Small</x-badge>
<x-badge style="secondary">Default</x-badge>
</div>
Control the badge style by setting the style attribute.
Badge
Badge
Badge
Badge
Badge
Badge
<div class="flex items-start justify-center gap-8 max-md:flex-col">
<x-badge>Badge</x-badge>
<x-badge style="secondary">Badge</x-badge>
<x-badge style="success">Badge</x-badge>
<x-badge style="info">Badge</x-badge>
<x-badge style="warning">Badge</x-badge>
<x-badge style="danger">Badge</x-badge>
</div>
Control the icon per badge instance by setting the icon attribute. Any blade-ui-kit/blade-icons compatible icon set can be used.
<div class="flex justify-center">
<x-badge style="secondary">
<x-heroicon-o-sparkles />
Badge
</x-badge>
</div>
| Attribute |
Default |
Description |
style |
primary |
string
Possible values primary, secondary, success, info, warning or danger. |
size |
default |
string
Possible values default, or sm. |