The badge component is a versatile feature-rich element that offers a multitude of styles and customization options to meet your specific needs. With a user-friendly API, integrating badges with icons and custom colors is a seamless process. You can effortlessly fine-tune the appearance of your badges, whether you want to change their size, adjust their colors, or add icons to either side of the label. For even greater control, the component provides append and prepend slots, enabling you to tailor the elements both to the left and right of the label as per your project requirements. This extensive flexibility ensures that you can achieve the desired look and feel for your badges, making them a perfect fit for your project.
Within the badge component, the default variant is solid, and you can access the full spectrum of Tailwind colors for this component.
1<x-badge label="Default" /> 2<x-badge primary label="Primary" /> 3<x-badge secondary label="Secondary" /> 4<x-badge positive label="Positive" /> 5<x-badge negative label="Negative" /> 6<x-badge warning label="Warning" /> 7<x-badge info label="Info" /> 8<x-badge dark label="Dark" /> 9<x-badge white label="White" />10<x-badge black label="Black" />11<x-badge slate label="Slate" />12<x-badge gray label="Gray" />13<x-badge zinc label="Zinc" />14<x-badge neutral label="Neutral" />15<x-badge stone label="Stone" />16<x-badge red label="Red" />17<x-badge orange label="Orange" />18<x-badge amber label="Amber" />19<x-badge lime label="Lime" />20<x-badge green label="Green" />21<x-badge emerald label="Emerald" />22<x-badge teal label="Teal" />23<x-badge cyan label="Cyan" />24<x-badge sky label="Sky" />25<x-badge blue label="Blue" />26<x-badge indigo label="Indigo" />27<x-badge violet label="Violet" />28<x-badge purple label="Purple" />29<x-badge fuchsia label="Fuchsia" />30<x-badge pink label="Pink" />31<x-badge rose label="Rose" />We also offer the outline variant for your project. Similar to our other variants, you can make use of the complete palette of Tailwind colors.
1<x-badge outline label="Default" /> 2<x-badge outline primary label="Primary" /> 3<x-badge outline secondary label="Secondary" /> 4<x-badge outline positive label="Positive" /> 5<x-badge outline negative label="Negative" /> 6<x-badge outline warning label="Warning" /> 7<x-badge outline info label="Info" /> 8<x-badge outline dark label="Dark" /> 9<x-badge outline white label="White" />10<x-badge outline black label="Black" />11<x-badge outline slate label="Slate" />12<x-badge outline gray label="Gray" />13<x-badge outline zinc label="Zinc" />14<x-badge outline neutral label="Neutral" />15<x-badge outline stone label="Stone" />16<x-badge outline red label="Red" />17<x-badge outline orange label="Orange" />18<x-badge outline amber label="Amber" />19<x-badge outline lime label="Lime" />20<x-badge outline green label="Green" />21<x-badge outline emerald label="Emerald" />22<x-badge outline teal label="Teal" />23<x-badge outline cyan label="Cyan" />24<x-badge outline sky label="Sky" />25<x-badge outline blue label="Blue" />26<x-badge outline indigo label="Indigo" />27<x-badge outline violet label="Violet" />28<x-badge outline purple label="Purple" />29<x-badge outline fuchsia label="Fuchsia" />30<x-badge outline pink label="Pink" />31<x-badge outline rose label="Rose" />We also provide the flat variant for your project. Like our other variants, you can access the full spectrum of Tailwind colors for your customization needs.
1<x-badge flat label="Default" /> 2<x-badge flat primary label="Primary" /> 3<x-badge flat secondary label="Secondary" /> 4<x-badge flat positive label="Positive" /> 5<x-badge flat negative label="Negative" /> 6<x-badge flat warning label="Warning" /> 7<x-badge flat info label="Info" /> 8<x-badge flat dark label="Dark" /> 9<x-badge flat white label="White" />10<x-badge flat black label="Black" />11<x-badge flat slate label="Slate" />12<x-badge flat gray label="Gray" />13<x-badge flat zinc label="Zinc" />14<x-badge flat neutral label="Neutral" />15<x-badge flat stone label="Stone" />16<x-badge flat red label="Red" />17<x-badge flat orange label="Orange" />18<x-badge flat amber label="Amber" />19<x-badge flat lime label="Lime" />20<x-badge flat green label="Green" />21<x-badge flat emerald label="Emerald" />22<x-badge flat teal label="Teal" />23<x-badge flat cyan label="Cyan" />24<x-badge flat sky label="Sky" />25<x-badge flat blue label="Blue" />26<x-badge flat indigo label="Indigo" />27<x-badge flat violet label="Violet" />28<x-badge flat purple label="Purple" />29<x-badge flat fuchsia label="Fuchsia" />30<x-badge flat pink label="Pink" />31<x-badge flat rose label="Rose" />Badge rounding customization now offers access to the complete range of Tailwind options, along with the flexibility for further customization as per your preferences.
1{{-- CSS: 'rounded-none' - You can use |rounded="none"| too --}} 2<x-badge squared label="No Color" /> 3 4{{-- CSS: 'rounded-sm' --}} 5<x-badge rounded="sm" primary label="Primary" /> 6 7{{-- CSS: 'rounded' - DEFAULT --}} 8<x-badge rounded="base" secondary label="Secondary" /> 9 10{{-- CSS: 'rounded-md' --}}11<x-badge rounded="md" positive label="Positive" />12 13{{-- CSS: 'rounded-lg' --}}14<x-badge rounded="lg" negative label="Negative" />15 16{{-- CSS: 'rounded-xl' --}}17<x-badge rounded="xl" warning label="Warning" />18 19{{-- CSS: 'rounded-2xl' --}}20<x-badge rounded="2xl" info label="Info" />21 22{{-- CSS: 'rounded-3xl' --}}23<x-badge rounded="3xl" dark label="Dark" />24 25{{-- CSS: 'rounded-full' - You can use |rounded| too --}}26<x-badge rounded="full" pink label="Pink" />27 28{{-- Or Custom --}}29<x-badge rounded="rounded-[1.25rem]" red label="Red" />In contrast to version 1, we've introduced the mini-badge, which offers extensive customization options, particularly with regards to rounding. In version 1, the only available option was the badge.circle.
1<x-mini-badge icon="home" rounded /> 2<x-mini-badge primary icon="pencil" squared /> 3<x-mini-badge secondary icon="clipboard-document-list" /> 4<x-mini-badge positive icon="check" /> 5<x-mini-badge negative icon="x-mark" /> 6<x-mini-badge warning icon="exclamation-triangle" /> 7<x-mini-badge info icon="information-circle" /> 8<x-mini-badge dark icon="no-symbol" /> 9<x-mini-badge secondary label="A" />10<x-mini-badge positive label="B" />11<x-mini-badge negative label="C" />12<x-mini-badge primary label="+" />The badge comes with three native size options: sm, md, and lg.
1{{-- You can use |size="sm"| too - DEFAULT --}}2<x-badge icon="face-smile" secondary label="Secondary" />3 4<x-badge md icon="inbox-stack" positive label="Positive" />5 6<x-badge lg icon="power" negative label="Negative" />Furthermore, you can select an icon to appear on the left side of the label, as well as a right-icon, placed to the right of the label, as the name implies. Additionally, you have the flexibility to adjust the size of these icons.
1<x-badge icon-size="sm" lg icon="share" blue label="Blue" />2 3<x-badge icon-size="md" lg icon="wallet" lime label="Lime" />4 5{{-- Here you can remove the icon-size too, since it is the same as the size --}}6<x-badge icon-size="lg" lg right-icon="cpu-chip" purple label="Purple" />Should you wish to tailor the elements on both sides of the label, we offer append and prepend slots that provide a flexible solution for customization.
1<x-badge flat primary label="Prepend"> 2 <x-slot name="prepend" class="relative flex items-center w-2 h-2"> 3 <span 4 class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span> 5 6 <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span> 7 </x-slot> 8</x-badge> 9 10<x-badge flat primary label="Append">11 <x-slot name="append" class="relative flex items-center w-2 h-2">12 <span13 class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span>14 15 <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span>16 </x-slot>17</x-badge>18 19<x-badge flat red label="Laravel">20 <x-slot name="append" class="relative flex items-center w-2 h-2">21 <badge type="badge">22 <x-icon name="x-mark" class="w-4 h-4" />23 </badge>24 </x-slot>25</x-badge>