Sigta UI · Kit

Badge & Pill

Badges — outline, solid & accent

Outline Solid Highlight
Source 
<div class="flex flex-wrap items-center gap-3">
        <sigta:badge>Outline</sigta:badge>
        <sigta:badge variant="solid">Solid</sigta:badge>
        <sigta:badge variant="accent">Highlight</sigta:badge>
    </div>

Status pills

Operational Degraded Paused
Source 
<div class="flex flex-wrap items-center gap-3">
        <sigta:pill variant="success">Operational</sigta:pill>
        <sigta:pill variant="danger">Degraded</sigta:pill>
        <sigta:pill>Paused</sigta:pill>
    </div>

In context — table stage column

Shipping Active At risk New
Source 
<div class="flex flex-wrap items-center gap-3">
        <sigta:pill variant="success">Shipping</sigta:pill>
        <sigta:pill variant="success">Active</sigta:pill>
        <sigta:pill variant="danger">At risk</sigta:pill>
        <sigta:badge variant="accent">New</sigta:badge>
    </div>