components
Tailwind CSS Badge
Enhance UI with FlyonUI badges using Tailwind CSS. Create customizable status indicators or tags for web applications.
The standard format for badge is component class badge, accompanied by modifier class badge-{semantic-color}.
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
<span class="badge">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>Add modifier class badge-soft for soft colored badges.
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
<span class="badge badge-soft">Default</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-soft badge-secondary">Secondary</span>
<span class="badge badge-soft badge-accent">Accent</span>
<span class="badge badge-soft badge-info">Info</span>
<span class="badge badge-soft badge-success">Success</span>
<span class="badge badge-soft badge-warning">Warning</span>
<span class="badge badge-soft badge-error">Error</span>Add modifier class badge-outline for outline badges.
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
<span class="badge badge-outline">Default</span>
<span class="badge badge-outline badge-primary">Primary</span>
<span class="badge badge-outline badge-secondary">Secondary</span>
<span class="badge badge-outline badge-accent">Accent</span>
<span class="badge badge-outline badge-info">Info</span>
<span class="badge badge-outline badge-success">Success</span>
<span class="badge badge-outline badge-warning">Warning</span>
<span class="badge badge-outline badge-error">Error</span>Use the rounded-full utility class to make badges pilled. The default shape of the badges but can be altered by using
TailwindCSS Border Radius utility classes.
Primary
Primary
Primary
<span class="badge badge-primary rounded-full">Primary</span>
<span class="badge badge-soft badge-primary rounded-full">Primary</span>
<span class="badge badge-outline badge-primary rounded-full">Primary</span>This is the Default shape of the badge.
Primary
Primary
Primary
<span class="badge badge-primary">Primary</span>
<span class="badge badge-soft badge-primary">Primary</span>
<span class="badge badge-outline badge-primary">Primary</span>Add responsive class badge-{size} where {size} = xs|sm|md|lg|xl for badges of different sizes.
1
2
3
4
5
<span class="badge badge-primary badge-xs">1</span>
<span class="badge badge-primary badge-sm">2</span>
<span class="badge badge-primary">3</span>
<span class="badge badge-primary badge-lg">4</span>
<span class="badge badge-primary badge-xl">5</span>Use badges in anchor tags for clickable badge links.
<a href="#"><span class="badge badge-primary">Primary</span></a>
<a href="#"><span class="badge badge-secondary">Secondary</span></a>
<a href="#"><span class="badge badge-success">Success</span></a>
<a href="#"><span class="badge badge-error">Error</span></a>
<a href="#"><span class="badge badge-warning">Warning</span></a>
<a href="#"><span class="badge badge-info">Info</span></a>Use badge with utility classes height(h), width(w) or size & p-0 for dot style badges.
Default
Primary
Secondary
Success
Error
Warning
Info
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge size-2 p-0"></span>
Default
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-primary size-2 p-0"></span>
Primary
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-secondary size-2 p-0"></span>
Secondary
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-success size-2 p-0"></span>
Success
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-error size-2 p-0"></span>
Error
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-warning size-2 p-0"></span>
Warning
</div>
<div class="flex items-center justify-center gap-1.5 text-base">
<span class="badge badge-info size-2 p-0"></span>
Info
</div>You can achieve this style by combining the border-dashed utility class with the badge-outline modifier class.
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
<span class="badge badge-outline border-dashed">Default</span>
<span class="badge badge-outline border-dashed badge-primary">Primary</span>
<span class="badge badge-outline border-dashed badge-secondary">Secondary</span>
<span class="badge badge-outline border-dashed badge-accent">Accent</span>
<span class="badge badge-outline border-dashed badge-info">Info</span>
<span class="badge badge-outline border-dashed badge-success">Success</span>
<span class="badge badge-outline border-dashed badge-warning">Warning</span>
<span class="badge badge-outline border-dashed badge-error">Error</span>Use svg or icons inside badges for icon badges.
Add utility classes size & p-0 for square icon badges.
<span class="badge size-6 p-0"> <span class="icon-[tabler--user]"></span></span>
<span class="badge badge-primary size-6 p-0"> <span class="icon-[tabler--star]"></span></span>
<span class="badge badge-secondary size-6 p-0"> <span class="icon-[tabler--sun]"></span></span>
<span class="badge badge-accent size-6 p-0"> <span class="icon-[tabler--moon]"></span></span>
<span class="badge badge-info size-6 p-0"> <span class="icon-[tabler--folder]"></span></span>
<span class="badge badge-success size-6 p-0"> <span class="icon-[tabler--check]"></span></span>
<span class="badge badge-warning size-6 p-0"> <span class="icon-[tabler--cloud]"></span></span>
<span class="badge badge-error size-6 p-0"> <span class="icon-[tabler--clock]"></span></span>Add utility classes rounded-full, size & p-0 for circular Icon badges.
<span class="badge size-6 rounded-full p-0"> <span class="icon-[tabler--user]"></span></span>
<span class="badge badge-primary size-6 rounded-full p-0"> <span class="icon-[tabler--star]"></span></span>
<span class="badge badge-secondary size-6 rounded-full p-0"> <span class="icon-[tabler--sun]"></span></span>
<span class="badge badge-accent size-6 rounded-full p-0"> <span class="icon-[tabler--moon]"></span></span>
<span class="badge badge-info size-6 rounded-full p-0"> <span class="icon-[tabler--folder]"></span></span>
<span class="badge badge-success size-6 rounded-full p-0"> <span class="icon-[tabler--check]"></span></span>
<span class="badge badge-warning size-6 rounded-full p-0"> <span class="icon-[tabler--cloud]"></span></span>
<span class="badge badge-error size-6 rounded-full p-0"> <span class="icon-[tabler--clock]"></span></span>Badges used in text inherit the font size of the immediate parent element.
Heading NEW
Heading NEW
Heading NEW
Heading NEW
Heading NEW
<p class="text-xl"> Heading <span class="badge badge-outline badge-secondary badge-xl ms-1 rounded-full">NEW</span></p>
<p class="text-lg"> Heading <span class="badge badge-outline badge-secondary badge-lg ms-1 rounded-full">NEW</span></p>
<p class="text-base"> Heading <span class="badge badge-outline badge-secondary ms-1 rounded-full">NEW</span></p>
<p class="text-sm"> Heading <span class="badge badge-outline badge-secondary badge-sm ms-1 rounded-full">NEW</span></p>
<p class="text-xs"> Heading <span class="badge badge-outline badge-secondary badge-xs ms-1 rounded-full">NEW</span></p>Add badges to buttons to display additional information in buttons.
<button class="btn btn-primary btn-soft">
Inbox
<span class="badge badge-primary badge-sm">+99</span>
</button>
<button class="btn btn-primary btn-soft">
Send
<span class="badge badge-primary size-6 p-0"><span class="icon-[tabler--send]"></span></span>
</button>Use the img tag to display avatar badges with an image.
John
Anna
Sophia<span class="badge badge-primary badge-lg">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="John" class="size-4.5 rounded-full"/>
John
</span>
<span class="badge badge-soft badge-primary badge-lg">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" alt="Anna" class="size-4.5 rounded-full"/>
Anna
</span>
<span class="badge badge-outline badge-primary badge-lg">
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="Sophia" class="size-4.5 rounded-full"/>
Sophia
</span>Dismissible badges are also referred as chips.
Include the data-remove-element attribute in the close button element and set its value to #id to specify the element to be removed. Customize the removal animation by incorporating the removing: modifier, as illustrated below.
Refer
Remove Element
plugin for more details.
Badge
Badge
Badge
<span class="badge badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-1" >
Badge
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-1" aria-label="Dismiss Button" ></button>
</span>
<span class="badge badge-soft badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-2" >
Badge
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-2" aria-label="Dismiss Button" ></button>
</span>
<span class="badge badge-outline badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-3" >
Badge
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-3" aria-label="Dismiss Button" ></button>
</span>A simple example of dismissible avatar badges.
John
Anna
Sophia
<span class="badge badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-4" >
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="John" class="size-4.5 rounded-full" />
John
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-4" aria-label="Dismiss Button" ></button>
</span>
<span class="badge badge-soft badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-5" >
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-2.png" alt="Anna" class="size-4.5 rounded-full"/>
Anna
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-5" aria-label="Dismiss Button" ></button>
</span>
<span class="badge badge-outline badge-primary badge-lg removing:translate-x-5 removing:opacity-0 transition duration-300 ease-in-out" id="badge-6" >
<img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-10.png" alt="Sophia" class="size-4.5 rounded-full"/>
Sophia
<button class="icon-[tabler--circle-x-filled] size-5 min-h-0 cursor-pointer px-0" data-remove-element="#badge-6" aria-label="Dismiss Button" ></button>
</span>