Badge

A short label for a status or a count.

Variants
Default Secondary Outline Destructive Success Warning Info 
<div class="flex flex-wrap items-center gap-2">
	{ui badge, title: 'Default' /}
	{ui badge, title: 'Secondary', variant: 'secondary' /}
	{ui badge, title: 'Outline', variant: 'outline' /}
	{ui badge, title: 'Destructive', variant: 'destructive' /}
	{ui badge, title: 'Success', variant: 'success' /}
	{ui badge, title: 'Warning', variant: 'warning' /}
	{ui badge, title: 'Info', variant: 'info' /}
</div>

The success, warning and info variants fill with their own tokens, the same way destructive does. A badge is not interactive. For something to click, use a button or put the badge inside a link.

With an icon
Verified Failed 
<div class="flex flex-wrap items-center gap-2">
	{ui badge, title: 'Verified', icon: 'check' /}
	{ui badge, title: 'Failed', icon: 'circle-alert', variant: 'destructive' /}
</div>
Beside text

Release notes New 

<h3 class="text-lg font-semibold">
	Release notes
	{ui badge, title: 'New', variant: 'secondary' /}
</h3>

A badge has its own small text size, so it looks the same beside a heading or a paragraph. Space it with a utility such as ml-2, passed as class.

Params

Param Default Description
title '' the text
variant null secondary, outline, destructive, success, warning or info
icon null an icon name, before the title
class '' added to badge
attrs [] any other attributes, e.g. ['id' => 'status']