Badge
Display a badge with different variants and styles.
Usage
Default
Default
<div class="grid place-content-center gap-4"> <twig:ui:Badge> Default </twig:ui:Badge> </div>
Light
Primary
Success
Warning
Info
Destructive
Secondary
<div class="flex flex-col items-center gap-4"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="light"> Primary </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="light"> Success </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="light"> Warning </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="light"> Info </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="light"> Destructive </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="light"> Secondary </twig:ui:Badge> </div> </div>
Outline
Primary
Success
Warning
Info
Destructive
Secondary
<div class="flex flex-col items-center gap-4"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="outline"> Primary </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="outline"> Success </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="outline"> Warning </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="outline"> Info </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="outline"> Destructive </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="outline"> Secondary </twig:ui:Badge> </div> </div>
Ghost
Badge
<div class="grid place-content-center gap-4"> <twig:ui:Badge variant="primary" appearance="ghost"> Badge </twig:ui:Badge> </div>
Circle
Primary
Success
Warning
Info
Destructive
Primary
Success
Warning
Info
Destructive
Primary
Success
Warning
Info
Destructive
Secondary
Secondary
Secondary
<div class="flex flex-col items-center gap-4"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" shape="circle"> Primary </twig:ui:Badge> <twig:ui:Badge variant="success" shape="circle"> Success </twig:ui:Badge> <twig:ui:Badge variant="warning" shape="circle"> Warning </twig:ui:Badge> <twig:ui:Badge variant="info" shape="circle"> Info </twig:ui:Badge> <twig:ui:Badge variant="destructive" shape="circle"> Destructive </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="light" shape="circle"> Primary </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="light" shape="circle"> Success </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="light" shape="circle"> Warning </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="light" shape="circle"> Info </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="light" shape="circle"> Destructive </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="outline" shape="circle"> Primary </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="outline" shape="circle"> Success </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="outline" shape="circle"> Warning </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="outline" shape="circle"> Info </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="outline" shape="circle"> Destructive </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" shape="circle"> Secondary </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="light" shape="circle"> Secondary </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="outline" shape="circle"> Secondary </twig:ui:Badge> </div> </div>
Square
Badge
<div class="grid place-content-center gap-4"> <twig:ui:Badge variant="primary"> Badge </twig:ui:Badge> </div>
Sizes
Xsmall
Small
Medium
Large
5
5
5
5
<div class="flex flex-col items-center justify-center gap-6"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" size="xs"> Xsmall </twig:ui:Badge> <twig:ui:Badge variant="primary" size="sm"> Small </twig:ui:Badge> <twig:ui:Badge variant="primary"> Medium </twig:ui:Badge> <twig:ui:Badge variant="primary" size="lg"> Large </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" shape="circle" size="xs"> 5 </twig:ui:Badge> <twig:ui:Badge variant="primary" shape="circle" size="sm"> 5 </twig:ui:Badge> <twig:ui:Badge variant="primary" shape="circle"> 5 </twig:ui:Badge> <twig:ui:Badge variant="primary" shape="circle" size="lg"> 5 </twig:ui:Badge> </div> </div>
With Dot
Ghost
Default
Light
Outline
Ghost
Default
Light
Outline
Ghost
Default
Light
Outline
Ghost
Default
Light
Outline
Ghost
Default
Light
Outline
Ghost
Default
Light
Outline
<div class="flex flex-col items-center gap-6"> <div class="flex items-center gap-4"> <twig:ui:Badge appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="success" appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="success"> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="info" appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="info"> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="warning" appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="warning"> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="destructive" appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="destructive"> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="ghost"> <twig:ui:Badge:Dot /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="secondary"> <twig:ui:Badge:Dot /> Default </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="light"> <twig:ui:Badge:Dot /> Light </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="outline"> <twig:ui:Badge:Dot /> Outline </twig:ui:Badge> </div> </div>
With Icon
Ghost
Solid
light
outline
Ghost
Solid
light
outline
Ghost
Solid
light
outline
Ghost
Solid
light
outline
Ghost
Solid
light
outline
Ghost
Solid
light
outline
<div class="flex flex-col items-center gap-6"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="primary"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="success" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="success"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="info" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="info"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="warning" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="warning"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="destructive" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="destructive"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="ghost"> <twig:ux:icon name="lucide:tag" /> Ghost </twig:ui:Badge> <twig:ui:Badge variant="secondary"> <twig:ux:icon name="lucide:mail" /> Solid </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="light"> <twig:ux:icon name="lucide:activity" /> light </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="outline"> <twig:ux:icon name="lucide:tag" /> outline </twig:ui:Badge> </div> </div>
With Remove Button
Ghost
Solid
Light
Outline
Ghost
Solid
light
Outline
Ghost
Solid
light
Outline
Ghost
Solid
light
Outline
Ghost
Solid
light
Outline
Ghost
Solid
light
Outline
<div class="flex flex-col items-center gap-4"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="secondary"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="light"> Light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="primary"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="light"> light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="success" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="success"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="light"> light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="success" appearance="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="info" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="info"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="light"> light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="info" appearance="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="warning" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="warning"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="light"> light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="warning" appearance="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="destructive" appearance="ghost"> Ghost <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="destructive"> Solid <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="light"> light <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> <twig:ui:Badge variant="destructive" appearance="outline"> Outline <twig:ui:Badge:Button> <twig:ux:icon name="lucide:x" /> </twig:ui:Badge:Button> </twig:ui:Badge> </div> </div>
Disabled
Ghost
Solid
Light
Outline
Ghost
Solid
Light
Outline
<div class="flex flex-col items-center gap-4"> <div class="flex items-center gap-4"> <twig:ui:Badge variant="primary" appearance="ghost" disabled="true"> Ghost </twig:ui:Badge> <twig:ui:Badge variant="primary" disabled="true"> Solid </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="light" disabled="true"> Light </twig:ui:Badge> <twig:ui:Badge variant="primary" appearance="outline" disabled="true"> Outline </twig:ui:Badge> </div> <div class="flex items-center gap-4"> <twig:ui:Badge variant="secondary" appearance="ghost" disabled="true"> Ghost </twig:ui:Badge> <twig:ui:Badge variant="secondary" disabled="true"> Solid </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="light" disabled="true"> Light </twig:ui:Badge> <twig:ui:Badge variant="secondary" appearance="outline" disabled="true"> Outline </twig:ui:Badge> </div> </div>