Skip to main content

Avatar

Avatar in Storybook

Examples​

Check out the Usage section for details about how to design an avatar properly, and the different configuration options we provide.

Basic example​

A basic avatar renders a button that contains a circular image. By default it displays the Person Icon from Jutro's icons package.

import { Avatar } from '@jutro/components';

<Avatar/>

Custom icon example​

The icon property allows you to use any Jutro icon as the default icon. For more information about Jutro icons, see the Icon component page.

import { Avatar } from '@jutro/components';
import { HelpIcon } from '@jutro/icons';

<Avatar icon={HelpIcon}/>

Image example​

The avatar component will display any arbitrary image with the imageSource property. The image will be resized to fit within the circle. In the example below, the source is a 32x32 square image that becomes resized to fit within the default circle.

import { Avatar } from '@jutro/components';

<Avatar imageSource='/path/to/image'/>

Auth info example​

You can set the avatar component to display the authentication client's content using the useAuthInfo property.

import { Avatar } from '@jutro/components';

<Avatar useAuthInfo/>

Username example​

The username property will be used as alt text. Additionally, if no imageSource is set the initials from the username string will be displayed instead of an icon.

import { Avatar } from '@jutro/components';

<Avatar
  username="John Doe"
  imageSource='/path/to/image'
/>
<Avatar
  username="John Doe"
  icon={HelpIcon}
/>
<Avatar
  username="John Doe"
/>