Theme:
Badge
Badges are small status descriptors for UI elements. Use them to label, categorize, or indicate counts.
Color Variants
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
<span class="dui-badge">Default</span>
<span class="dui-badge dui-badge-primary">Primary</span>
<span class="dui-badge dui-badge-secondary">Secondary</span>
<span class="dui-badge dui-badge-accent">Accent</span>
<span class="dui-badge dui-badge-info">Info</span>
<span class="dui-badge dui-badge-success">Success</span>
<span class="dui-badge dui-badge-warning">Warning</span>
<span class="dui-badge dui-badge-error">Error</span>
Outline
Primary
Secondary
Accent
Active
Expired
<span class="dui-badge dui-badge-outline dui-badge-primary">Primary</span>
<span class="dui-badge dui-badge-outline dui-badge-secondary">Secondary</span>
<span class="dui-badge dui-badge-outline dui-badge-success">Active</span>
<span class="dui-badge dui-badge-outline dui-badge-error">Expired</span>
Sizes
xs
sm
default
lg
xl
<span class="dui-badge dui-badge-primary dui-badge-xs">xs</span>
<span class="dui-badge dui-badge-primary dui-badge-sm">sm</span>
<span class="dui-badge dui-badge-primary">default</span>
<span class="dui-badge dui-badge-primary dui-badge-lg">lg</span>
<span class="dui-badge dui-badge-primary dui-badge-xl">xl</span>
Badge in Context
<button class="dui-btn dui-btn-primary">
Inbox <span class="dui-badge dui-badge-xs">12</span>
</button>