Avatar
Avatar component with optional status indicator.
Preview
JD
python
avatar(name='Jane Doe', size='sm', alt='Jane Doe')Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.name = 'Jane Doe'my_template.html
django
{% load theme_components %}
{% theme_avatar name=name size='sm' alt='Jane Doe' %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| src | Optional[str] | — | |
| alt | str | — | |
| name | str | — | |
| size | str | md | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_image | str | — | |
| slot_fallback | str | — |
Slots
slot_image slot_fallback
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/avatar.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
| css | djust_theming/components.css | Defines 6 of this component's classes at line 762, 775, 781, 787, 793, 799. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_components/components.css | Defines 5 of this component's classes at line 390, 392, 393, 394, 397. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
CSS variables
--muted --muted-foreground
Template source — avatar.html
django
<div class="{{ css_prefix }}avatar {{ css_prefix }}avatar-{{ size }} {% if attrs.class %}{{ attrs.class }}{% endif %}"
{% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
{% if slot_image %}
{{ slot_image|safe }}
{% elif src %}
<img src="{{ src }}" alt="{{ alt }}" class="{{ css_prefix }}avatar-image" />
{% elif slot_fallback %}
{{ slot_fallback|safe }}
{% else %}
<span class="{{ css_prefix }}avatar-fallback">{{ initials }}</span>
{% endif %}
</div>