Returnless UI

Avatar ​

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Usage ​

js
<script lang="ts" setup>
import { Avatar } from '@returnless/focus-ui';
</script>

<template>
  <Avatar name="John Doe" />
</template>

Variants ​

With initials ​

JD
js
<script lang="ts" setup>
import { Avatar } from '@returnless/focus-ui';
</script>

<template>
  <Avatar name="John Doe" initials="JD" />
</template>

Sizes ​

JJDJDJDJD
js
<script lang="ts" setup>
import { Avatar } from '@returnless/focus-ui';
</script>

<template>
  <Avatar name="John Doe" size="xs" />
  <Avatar name="John Doe" size="sm" />
  <Avatar name="John Doe" size="md" />
  <Avatar name="John Doe" size="lg" />
  <Avatar name="John Doe" size="xl" />
  
  // Or with initials...
  <Avatar name="John Doe" size="xs" initials="JD" />
  <Avatar name="John Doe" size="sm" initials="JD" />
  <Avatar name="John Doe" size="md" initials="JD" />
  <Avatar name="John Doe" size="lg" initials="JD" />
  <Avatar name="John Doe" size="xl" initials="JD" />
</template>

Best practices ​

Avatars should be one of 5 sizes:

  • Extra-small (20 x 20 px): use in tightly condensed layouts
  • Small (24 × 24 px): use when the medium size is too big for the layout, or when the avatar has less importance
  • Medium (28 × 28 px): use as the default size
  • Large (32 × 32 px): use when an avatar is a focal point, such as on a single customer card
  • Extra large (40 × 40 px): use when an avatar is a focal point, such as on a single customer card

Content guidelines ​

Any time you use an image to communicate a concept in the interface, it's important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what's in the image to people who may not be able to see it.

For avatars, we recommend using a format that describes what will show in the image:

  • alt=Person's name" if the avatar represents a person
  • alt=Company name" if the avatar represents a business
  • alt="" if the name of the person/business appears next to the avatar as text

Accessibility ​

Labeling ​

The avatar component represents content, and should have a text equivalent for users using assistive technologies. By default, the value of the name prop is used for the alternative text. If different text would be more accurate, use the accessibilityLabel prop to replace the value provided by name.