Django Indicator Component

Indicator overlays a badge or dot on a corner of its child element. Use it to show unread counts on icons, status dots on avatars, or 'new' labels on cards.

Basic Indicator

Preview

99+

Code

<c-lb.indicator>
  <c-lb.indicator.item variant="secondary">99+</c-lb.indicator.item>
  <c-lb.button>Inbox</c-lb.button>
</c-lb.indicator>

Color Variants

Preview

New

Code

<div class="flex flex-wrap gap-8">
  <c-lb.indicator>
    <c-lb.indicator.item variant="primary">New</c-lb.indicator.item>
    <c-lb.button>Primary</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item variant="secondary">New</c-lb.indicator.item>
    <c-lb.button>Secondary</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item variant="accent">New</c-lb.indicator.item>
    <c-lb.button>Accent</c-lb.button>
  </c-lb.indicator>
</div>

Sizes

Preview

Code

<div class="flex flex-wrap gap-8">
  <c-lb.indicator>
    <c-lb.indicator.item variant="secondary" size="sm">sm</c-lb.indicator.item>
    <c-lb.button>Small</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item variant="secondary" size="md">md</c-lb.indicator.item>
    <c-lb.button>Medium</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item variant="secondary" size="lg">lg</c-lb.indicator.item>
    <c-lb.button>Large</c-lb.button>
  </c-lb.indicator>
</div>

Shapes

Preview

New

●

Code

<div class="flex flex-wrap gap-8">
  <c-lb.indicator>
    <c-lb.indicator.item shape="badge" variant="primary">New</c-lb.indicator.item>
    <c-lb.button>Badge</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item shape="status" variant="error" size="sm"></c-lb.indicator.item>
    <c-lb.button>Status</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item shape="none" class="text-error text-xl">●</c-lb.indicator.item>
    <c-lb.button>None</c-lb.button>
  </c-lb.indicator>
</div>

With Icon

Preview

Code

<div class="flex flex-wrap gap-8">
  <c-lb.indicator>
    <c-lb.indicator.item shape="none" icon="rmx.mail" variant="primary" size="xs"></c-lb.indicator.item>
    <c-lb.button>Mail</c-lb.button>
  </c-lb.indicator>
  <c-lb.indicator>
    <c-lb.indicator.item icon="rmx.notification" variant="error" size="xs"></c-lb.indicator.item>
    <c-lb.button>Alerts</c-lb.button>
  </c-lb.indicator>
</div>

Positions

Preview

top-start

content

center

content

bottom-end

content

Code

<div class="flex flex-wrap gap-8">
  <c-lb.indicator>
    <c-lb.indicator.item horizontal="start" vertical="top" variant="primary">top-start</c-lb.indicator.item>
    <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
  </c-lb.indicator>

  <c-lb.indicator>
    <c-lb.indicator.item horizontal="center" vertical="middle" variant="accent">center</c-lb.indicator.item>
    <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
  </c-lb.indicator>

  <c-lb.indicator>
    <c-lb.indicator.item horizontal="end" vertical="bottom" variant="secondary">bottom-end</c-lb.indicator.item>
    <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
  </c-lb.indicator>
</div>

API Reference

`c-lb.indicator`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

Slot Name	Description
default	Content to attach indicator to

`c-lb.indicator.item`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
shape	badge status none	`badge`	No	Visual shape preset (badge, status dot, or none for full customisation)
variant	neutral primary secondary accent info success warning error	-	No	Color variant (classes depend on shape)
horizontal	start center end	-	No	Horizontal alignment
vertical	top middle bottom	-	No	Vertical alignment
size	xs sm md lg xl	-	No	Size (classes depend on shape)
icon	string	-	No	Icon name to display
↳ .fill	modifier	-	No	Render in filled (solid) style
icon.class	string	-	No	Additional CSS classes for the icon

Slot Name	Description
default	Indicator content (badge, status, etc.)