Avatar — Component Storybook

LIVE PREVIEW 4

avatar(name=Jane Doe, size=sm, alt=Jane Doe)

avatar(name=Jane Doe, size=md, alt=Jane Doe)

avatar(name=Jane Doe, size=lg, alt=Jane Doe)

avatar(src=https://via.placeholder.com/64, alt=Placeholder avatar, size=md)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — OPTIONAL 8

Name	Type	Default
`src`	`Optional[str]`	—
`alt`	`str`	—
`name`	`str`	—
`size`	`str`	md
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_image`	`str`	—
`slot_fallback`	`str`	—

AVAILABLE SLOTS 2

slot_image slot_fallback

CSS VARIABLES 2

--muted --muted-foreground

TEMPLATE SOURCE

avatar.html

<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>