Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Badge

<c-lb.badge /> Markdown

Badge component for Django: add status indicators, labels, and notification counts. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Badge renders a small inline label with colour variants matching the daisyUI theme palette. Place them on cards, list items, or navigation elements to indicate status, category, or counts.

Basic Badge

Basic Badge 
<c-lb.badge>Basic Badge</c-lb.badge>

Color Variants

Neutral Primary Secondary Accent Info Success Warning Error 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="neutral">Neutral</c-lb.badge>
  <c-lb.badge variant="primary">Primary</c-lb.badge>
  <c-lb.badge variant="secondary">Secondary</c-lb.badge>
  <c-lb.badge variant="accent">Accent</c-lb.badge>
  <c-lb.badge variant="info">Info</c-lb.badge>
  <c-lb.badge variant="success">Success</c-lb.badge>
  <c-lb.badge variant="warning">Warning</c-lb.badge>
  <c-lb.badge variant="error">Error</c-lb.badge>
</div>

Style Variants

Default Outline Dash Soft Ghost 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="primary">Default</c-lb.badge>
  <c-lb.badge variant="primary" style="outline">Outline</c-lb.badge>
  <c-lb.badge variant="primary" style="dash">Dash</c-lb.badge>
  <c-lb.badge variant="primary" style="soft">Soft</c-lb.badge>
  <c-lb.badge variant="primary" style="ghost">Ghost</c-lb.badge>
</div>

Sizes

Extra Small Small Medium Large Extra Large 
<div class="flex flex-wrap items-center gap-2">
  <c-lb.badge variant="primary" size="xs">Extra Small</c-lb.badge>
  <c-lb.badge variant="primary" size="sm">Small</c-lb.badge>
  <c-lb.badge variant="primary" size="md">Medium</c-lb.badge>
  <c-lb.badge variant="primary" size="lg">Large</c-lb.badge>
  <c-lb.badge variant="primary" size="xl">Extra Large</c-lb.badge>
</div>

Integrated Icons

Info Success Warning Error Featured Favorite 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="info" icon="rmx.information">Info</c-lb.badge>
  <c-lb.badge variant="success" icon="rmx.check">Success</c-lb.badge>
  <c-lb.badge variant="warning" icon="rmx.error_warning">Warning</c-lb.badge>
  <c-lb.badge variant="error" icon="rmx.close">Error</c-lb.badge>
  <c-lb.badge variant="primary" icon="rmx.star">Featured</c-lb.badge>
  <c-lb.badge variant="secondary" icon="rmx.heart">Favorite</c-lb.badge>
</div>

With Icons

Info Success Warning Error 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="info">
    <c-lbi n="rmx.information" w="1em" h="1em" />
    Info
  </c-lb.badge>
  <c-lb.badge variant="success">
    <c-lbi n="rmx.check" w="1em" h="1em" />
    Success
  </c-lb.badge>
  <c-lb.badge variant="warning">
    <c-lbi n="rmx.error-warning" w="1em" h="1em" />
    Warning
  </c-lb.badge>
  <c-lb.badge variant="error">
    <c-lbi n="rmx.close" w="1em" h="1em" />
    Error
  </c-lb.badge>
</div>

Icon Only Badges

<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="primary" icon="rmx.star"></c-lb.badge>
  <c-lb.badge variant="success" icon="rmx.check"></c-lb.badge>
  <c-lb.badge variant="warning" icon="rmx.error_warning"></c-lb.badge>
  <c-lb.badge variant="error" icon="rmx.close"></c-lb.badge>
  <c-lb.badge variant="info" icon="rmx.information"></c-lb.badge>
  <c-lb.badge variant="secondary" icon="rmx.heart"></c-lb.badge>
</div>

Icon Sizes

Extra Small Small Medium Large Extra Large 
<div class="flex flex-wrap items-center gap-2">
  <c-lb.badge variant="primary" size="xs" icon="rmx.star">Extra Small</c-lb.badge>
  <c-lb.badge variant="primary" size="sm" icon="rmx.star">Small</c-lb.badge>
  <c-lb.badge variant="primary" size="md" icon="rmx.star">Medium</c-lb.badge>
  <c-lb.badge variant="primary" size="lg" icon="rmx.star">Large</c-lb.badge>
  <c-lb.badge variant="primary" size="xl" icon="rmx.star">Extra Large</c-lb.badge>
</div>

Icon Fill

Unfilled Star Filled Star Unfilled Heart Filled Heart Unfilled Check Filled Check 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="primary" icon="rmx.star">Unfilled Star</c-lb.badge>
  <c-lb.badge variant="primary" icon.fill="rmx.star">Filled Star</c-lb.badge>
  <c-lb.badge variant="success" icon="rmx.heart">Unfilled Heart</c-lb.badge>
  <c-lb.badge variant="success" icon.fill="rmx.heart">Filled Heart</c-lb.badge>
  <c-lb.badge variant="warning" icon="rmx.check">Unfilled Check</c-lb.badge>
  <c-lb.badge variant="warning" icon.fill="rmx.check">Filled Check</c-lb.badge>
</div>

Icon at End

Info Success Warning Error Next Download Filled Icon 
<div class="flex flex-wrap gap-2">
  <c-lb.badge variant="info" icon.end="rmx.arrow-right">
    Info
  </c-lb.badge>
  <c-lb.badge variant="success" icon.end="rmx.check">
    Success
  </c-lb.badge>
  <c-lb.badge variant="warning" icon.end="rmx.error-warning">
    Warning
  </c-lb.badge>
  <c-lb.badge variant="error" icon.end="rmx.close">
    Error
  </c-lb.badge>
  <c-lb.badge variant="primary" icon.end="rmx.arrow-right">
    Next
  </c-lb.badge>
  <c-lb.badge variant="accent" icon.end="rmx.download">
    Download
  </c-lb.badge>
  <c-lb.badge variant="secondary" icon.fill.end="rmx.arrow-right">
    Filled Icon
  </c-lb.badge>
</div>

Empty Badges

<div class="flex flex-wrap items-center gap-2">
  <c-lb.badge variant="primary" size="lg"></c-lb.badge>
  <c-lb.badge variant="primary" size="md"></c-lb.badge>
  <c-lb.badge variant="primary" size="sm"></c-lb.badge>
  <c-lb.badge variant="primary" size="xs"></c-lb.badge>
</div>

API Reference

c-lb.badge

Property Type Default Required Description
class string - No Additional CSS classes to apply
variant
neutral primary secondary accent info success warning error
- No Badge color variant
style
outline dash soft ghost
- No Badge style variant
size
xs sm md lg xl
md No Badge size
icon string - No Icon name to display
↳ .fill modifier - No Render in filled (solid) style
↳ .end modifier - No Place at the end of the text
icon.class string - No Additional CSS classes for the icon
Prev Avatar
Next Card