Avatar

An avatar component represents an object or entity

Example

import { Avatar } from "@seduo/design-system";
...
<Avatar size="small">AB</Avatar>
<Avatar>AB</Avatar>
<Avatar size="large">AB</Avatar>
...
<Avatar src="https://i.pravatar.cc/28?img=2" alt="Avatar Name" size="small" />
<Avatar src="https://i.pravatar.cc/38?img=2" alt="Avatar Name" />
<Avatar src="https://i.pravatar.cc/64?img=2" alt="Avatar Name" size="large" />

{% embed "@seduo-design-system/avatar.twig" with { props: {
    size: 'small'
}} %}
    {% block content %}
        AB
    {% endblock %}
{% endembed %}
{% embed "@seduo-design-system/avatar.twig" %}
    {% block content %}
        AB
    {% endblock %}
{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
    size: 'large'
}} %}
    {% block content %}
        AB
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/avatar.twig" with { props: {
        size: 'small',
        src: 'https://i.pravatar.cc/28?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
        src: 'https://i.pravatar.cc/38?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
        size: 'large',
        src: 'https://i.pravatar.cc/64?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}

<Avatar size="small">AB</Avatar>
<Avatar>AB</Avatar>
<Avatar size="large">AB</Avatar>
...
<Avatar src="https://i.pravatar.cc/28?img=2" alt="Avatar Name" size="small" />
<Avatar src="https://i.pravatar.cc/38?img=2" alt="Avatar Name" />
<Avatar src="https://i.pravatar.cc/64?img=2" alt="Avatar Name" size="large" />

API

Prop name	Type	Default	Description
`src`	`string`	-	src for image avatar
`srcSet`	`string`	-	srcSet for image avatar
`alt`	`string`	-	alt for image avatar or title in placeholder avatars
`size`	Size Dictionary	`medium`	Size of the component
`children`	`string`	-	text for placeholder avatars
`UNSAFE_className`	`string`	-	Wrapper custom classname

On this page