Badge
Badge
Variants
All badge variants — sunken status-bar panel style.
Default
Secondary
Destructive
Outline
Success
Warning
<.badge>Default</.badge>
<.badge variant="secondary">Secondary</.badge>
<.badge variant="destructive">Destructive</.badge>
<.badge variant="outline">Outline</.badge>
<.badge variant="success">Success</.badge>
<.badge variant="warning">Warning</.badge>
Icon Badges
Badges can include a leading platform SVG icon.
Trusted
Expiring
Device
<.badge variant="success">
<:icon><Icons.icon_checkmark class="h-3 w-3" /></:icon>
Trusted
</.badge>
Status Indicators
Badges as connection or session state labels.
Connected
Waiting
Failed
Idle
In Call
Role Labels
Badges as user role indicators in chat.
Owner
Operator
Half-Op
Voiced
Regular
Metadata Tags
Badges as small metadata tags on channels or files.
+nt
+s
PNG
2.4 MB
ScummVM
Status pill
Badge size xs, bevel sunken: the one word of state in a panel header's facets.
Offline
Playing
Incoming
Check file
<.badge variant="success" size="xs" bevel="sunken">Playing</.badge>
Icon well
IconWell: an icon in a pressed-in square, sm 32px, md 40px, lg 48px.
<.icon_well size="md"><Icons.icon_joystick class="h-6 w-6" /></.icon_well>
Language
14 objects
