Django Avatar Component

Avatar renders a circular image with optional status badges and group stacking. Use a single avatar for profile headers, or the group variant to stack overlapping avatars for contributor lists and team displays.

Basic Avatar

Preview

Code

{% load static %}

<c-lb.avatar src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Basic avatar" />

Sizes

Preview

Code

{% load static %}

<div class="flex flex-wrap items-center gap-4">
  <c-lb.avatar size="xs" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra small avatar" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Small avatar" />
  <c-lb.avatar size="md" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Medium avatar" />
  <c-lb.avatar size="lg" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Large avatar" />
  <c-lb.avatar size="xl" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra large avatar" />
</div>

Rounded

Preview

Code

{% load static %}

<div class="flex flex-wrap items-center gap-4">
  <c-lb.avatar rounded="xs" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra small rounded avatar" />
  <c-lb.avatar rounded="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Small rounded avatar" />
  <c-lb.avatar rounded="md" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Medium rounded avatar" />
  <c-lb.avatar rounded="lg" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Large rounded avatar" />
  <c-lb.avatar rounded="xl" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Extra large rounded avatar" />
  <c-lb.avatar rounded="full" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Fully rounded avatar" />
</div>

Mask Shapes

Preview

Code

{% load static %}

<div class="flex items-center gap-4">
  <c-lb.avatar mask="heart" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Heart mask avatar" />
  <c-lb.avatar mask="squircle" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Squircle mask avatar" />
  <c-lb.avatar mask="hexagon-2" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Hexagon mask avatar" />
</div>

The rounded and mask attributes should not be used together. Use one or the other to avoid conflicting styles.

Status Indicators

Preview

Code

{% load static %}

<div class="flex items-center gap-4">
  <c-lb.avatar status="online" rounded="full" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Online user" />
  <c-lb.avatar status="offline" rounded="full" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Offline user" />
</div>

Placeholder Avatars

Preview

Code

<div class="flex flex-wrap items-center gap-4">
  <c-lb.avatar placeholder initials="JD" bgColor="neutral" rounded="full" />
  <c-lb.avatar placeholder initials="AI" bgColor="primary" rounded="full" status="online" size="sm" />
  <c-lb.avatar placeholder icon="rmx.user" bgColor="accent" rounded="full" size="lg" />
  <c-lb.avatar placeholder icon.fill="rmx.admin" bgColor="success" rounded="full" />
</div>

With Rings

Preview

Code

{% load static %}

<div class="flex items-center gap-4">
  <c-lb.avatar
    ring="true"
    ringColor="primary"
    rounded="full"
    src="{% static 'lbdocs/img/stock/avatar.png' %}"
    alt="Avatar with primary ring" />
  <c-lb.avatar
    ring="true"
    ringColor="success"
    rounded="full"
    src="{% static 'lbdocs/img/stock/avatar.png' %}"
    alt="Avatar with success ring" />
</div>

Avatar Groups

Preview

Code

{% load static %}

<c-lb.avatar.group spacing="tight">
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
</c-lb.avatar.group>

Group Spacing

Preview

Wide Spacing (wide)

Normal Spacing (normal)

Tight Spacing (tight) - Default

Tighter Spacing (tighter)

Tightest Spacing (tightest)

Code

{% load static %}

<div class="space-y-8">
  <div>
    <h3 class="text-lg font-semibold mb-4">Wide Spacing (wide)</h3>
    <c-lb.avatar.group spacing="wide">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Normal Spacing (normal)</h3>
    <c-lb.avatar.group spacing="normal">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tight Spacing (tight) - Default</h3>
    <c-lb.avatar.group spacing="tight">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tighter Spacing (tighter)</h3>
    <c-lb.avatar.group spacing="tighter">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>

  <div>
    <h3 class="text-lg font-semibold mb-4">Tightest Spacing (tightest)</h3>
    <c-lb.avatar.group spacing="tightest">
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
      <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 4" />
    </c-lb.avatar.group>
  </div>
</div>

Group with Counter

Preview

+99

Code

{% load static %}

<c-lb.avatar.group>
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 1" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 2" />
  <c-lb.avatar size="sm" src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="User 3" />
  <c-lb.avatar size="sm" placeholder initials="+99" bgColor="neutral" />
</c-lb.avatar.group>

Custom Content

Preview

🎨

Code

<div class="flex items-center gap-4">
  <c-lb.avatar placeholder>
    <div class="w-24 rounded-full bg-gradient-to-r from-purple-500 to-pink-500">
      <c-lbi n="rmx.star" w="1.5rem" h="1.5rem" class="text-white" fill="true" />
    </div>
  </c-lb.avatar>

  <c-lb.avatar placeholder>
    <div class="w-24 rounded-full bg-base-200 text-2xl font-bold">
      🎨
    </div>
  </c-lb.avatar>
</div>

API Reference

`c-lb.avatar`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
size	xs sm md lg xl	`md`	No	Avatar size
rounded	xs sm md lg xl full	-	No	Avatar border radius size
mask	heart squircle hexagon-2 triangle pentagon diamond star	-	No	Avatar mask shape
status	online offline	-	No	Avatar online/offline status
placeholder	boolean	`False`	No	Whether this is a placeholder avatar
ring	boolean	`False`	No	Add a ring around the avatar
ringColor	primary secondary accent neutral info success warning error	-	No	Ring color variant (only applies if ring is true)
src	string	-	No	Image source URL (for image avatars)
alt	string	`Avatar`	No	Alt text for the image
initials	string	-	No	Initials text for placeholder avatars
bgColor	neutral primary secondary accent info success warning error	`neutral`	No	Background color for placeholder avatars
icon	string	-	No	Icon name for placeholder avatars (alternative to initials)
↳ .fill	modifier	-	No	Render in filled (solid) style
icon.class	string	-	No	Additional CSS classes for the icon

Slot Name	Description
default	Custom avatar content (overrides automatic image/placeholder rendering)

`c-lb.avatar.group`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
spacing	wide normal tight tighter tightest	`tight`	No	Spacing between avatars in the group

Slot Name	Description
default	Avatar components to display in the group