tui-badge

The TUI Badge component provides small inline labels to highlight statuses, categories, or counts. It supports solid and outline styles, with color variants.

Basic

<span class="tui-badge">Badge</span>
<span class="tui-badge">New</span>
<span class="tui-badge">v1.0</span>

BadgeNewv1.0

Variants

<span class="tui-badge">Default</span>
<span class="tui-badge primary">Primary</span>
<span class="tui-badge info">Info</span>
<span class="tui-badge warning">Warning</span>
<span class="tui-badge danger">Danger</span>
<span class="tui-badge outline">Outline</span>
<span class="tui-badge primary outline">Primary</span>
<span class="tui-badge info outline">Info</span>
<span class="tui-badge warning outline">Warning</span>
<span class="tui-badge danger outline">Danger</span>

DefaultPrimaryInfoWarningDangerOutlinePrimaryInfoWarningDanger