Components / Badge

Badge

# Introduction

Badges are used to highlight an item's status for quick recognition.

# Variants

We have prepared a variety of badges for you to choose from.

Default Inverse Info Success Danger Warning Primary
  
<div class="flex flex-wrap space-x-2">
    <zinq:badge>Default</zinq:badge>
    <zinq:badge inverse>Inverse</zinq:badge>
    <zinq:badge info>Info</zinq:badge>
    <zinq:badge success>Success</zinq:badge>
    <zinq:badge danger>Danger</zinq:badge>
    <zinq:badge warning>Warning</zinq:badge>
    <zinq:badge primary>Primary</zinq:badge>
</div>

# Sizing

You can also adjust the size of the badge by adding the sm attribute.

Default Info Success Danger Warning Primary
  
<div class="flex flex-wrap space-x-2">
    <zinq:badge sm>Default</zinq:badge>
    <zinq:badge sm info>Info</zinq:badge>
    <zinq:badge sm success>Success</zinq:badge>
    <zinq:badge sm danger>Danger</zinq:badge>
    <zinq:badge sm warning>Warning</zinq:badge>
    <zinq:badge sm primary>Primary</zinq:badge>
</div>

# Fancy

You can also add a fancy badge to display a more prominent status.

CHRISTMAS SALES
  
<zinq:fancy-badge>CHRISTMAS SALES</zinq:fancy-badge>