Avatar

Usage

import { Avatar } from "#/ui/components/Avatar"

<Avatar
  src="https://a.storyblok.com/f/180053/1200x1600/bbce43daaf/dan-spratling-profile-picture.jpg"
  alt="Dan Spratling"
  fallback="Dan Spratling"
/>

Image

The Avatar component functions like an image component, and takes src and alt props like an image would.

Fallback

The avatar component has a fallback option that will display the user’s initials if no image is provided.

Fallbacks are automatically calculate the best initials to display (see code for a breakdown how this works).

  // If 2 characters are passed it's assumed the user has already transformed the name
  <Avatar fallback="DS" />
  // Otherwise we calculate the initials based on the first characters of the first and last names (or words)
  <Avatar fallback="Dan Spratling" />
  // Finally, we'll just use the first two characters if there are no spaces
  <Avatar fallback="Dan" />

Size

The avatar has a selection of sizes to choose between, from xs to 2xl.

Customisation

Classes

You can customize avatars by passing a className prop. If this clashes with the default styles, the className will take precedence.