Skip to main content Skip to docs navigation

Avatar

An avatar component represents an object or entity

Example

examples

<Avatar size="small">AB</Avatar>
<Avatar>AB</Avatar>
<Avatar size="large">AB</Avatar>
<Avatar size="xlarge">AB</Avatar>
...
<Avatar
  src="https://i.pravatar.cc/24?img=2"
  alt="Avatar Name"
  size="small"
/>
<Avatar src="https://i.pravatar.cc/32?img=2" alt="Avatar Name" />
<Avatar
  src="https://i.pravatar.cc/40?img=2"
  alt="Avatar Name"
  size="large"
/>
      <Avatar
  src="https://i.pravatar.cc/64?img=2"
  alt="Avatar Name"
  size="xlarge"
      />
{% 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: 'xlarge'
}} %}
    {% block content %}
        AB
    {% endblock %}
{% endembed %}
...
{% embed "@seduo-design-system/avatar.twig" with { props: {
        size: 'small',
        src: 'https://i.pravatar.cc/24?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
        src: 'https://i.pravatar.cc/32?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
        size: 'large',
        src: 'https://i.pravatar.cc/40?img=2',
        alt: 'Avatar Name'
}} %}{% endembed %}
{% embed "@seduo-design-system/avatar.twig" with { props: {
    size: 'xlarge',
    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 size="xlarge">AB</Avatar>
...
<Avatar src="https://i.pravatar.cc/24?img=2" alt="Avatar Name" size="small" />
<Avatar src="https://i.pravatar.cc/32?img=2" alt="Avatar Name" />
<Avatar src="https://i.pravatar.cc/40?img=2" alt="Avatar Name" size="large" />
<Avatar src="https://i.pravatar.cc/64?img=2" alt="Avatar Name" size="xlarge" />

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