ddfsn / blade-components
  1. Blade Components
  5. Badge

Badge

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

Usage

<x-badge>Badge</x-badge>

Component API

Attribute Default Description
style default string
Possible values default, success, info, warning or danger.
size null string || null
Possible values null, sm, or lg.
icon null string || null

Style

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="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>

Size

Control the badge size by supplying the size="" 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 size="lg">Badge Text</x-badge>
    <x-badge>Badge Text</x-badge>
    <x-badge size="sm">Badge Text</x-badge>
</div>

Icon

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>

Previous

Avatar

Next

Button