Avatar

Display the profile photo, icon or short text

Avatar is a custom component that is used to display usually a profile image in lists, with fallbacks to display icon or text when there is no image available. It’s displayed inline, so it aligns well with any text or other component used next to it.

Make sure you are using the src prop or icon prop, as the src will take precedence over icon. Also, make sure that the text in default prop is text only, don’t use html tags such as <p> or similar there.

When using the text in the default slot, Avatar component will take first two letters of the text if there is one word is provided. In case there are two or more words (text separated by space), the component will take the first letter from the first two words.

Hierarchy of what will be shown looks like this:

• if exists, it will show the src (image) prop
• then comes the icon prop
• if both src and icon prop don’t exist, it will fall back to the content in default slot

Basic usage

Standalone with icon image and fallback text

BA

With text next to avatar

Hello, user!

Hierarchy of props

Avatar sizes

Avatars come in 5 different sizes, controlled by using the prop size. The size prop can take values such as sm, md, lg and xl. Default size value is normal, but you can omit the prop size completely to get this size.

The icons, images and text will scale with the size of the icon.

Sm

No

Ms

La

El

Slots reference

Slot	Description
default	The default slot will only take the plain text and extract the first two letters to show (if there is only one word in there), or the first letters of the first two words (if there are more than one word in slot).

Props reference

Prop	Type	Default	Accepts	Description
icon	String	null	Any	This is the string that is usually a CSS class if you have an icon set in project. If you’ve started your project from Badin boilerplate project, then you should have icons used in examples already set up.
src	String	null	Any	A path to an image
size	String	normal	sm normal md lg xl	A size of the avatar component, predefined in the component’s CSS