No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Avatar

Avatars can be used to represent people or objects. It supports images or letters.

Props are listed at the end of this page.

View source

Imports

import { Avatar } from "artemis-ui";

Usage

AR
<Avatar />

Circular

AR
<Avatar shape="circle" />

With Image

Use the src prop to add image

avatar
<Avatar shape="circle" src="https://images.pexels.com/photos/2380794/pexels-photo-2380794.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" />

Custom Text

JD
<Avatar text="JD" />

Custom Color

provide a string of hex, rgb, hsla in color prop to change color

AR
<Avatar shape="circle" color="#1f35fa" />

Sizes

AR
AR
AR
<Avatar size="sm" />
<Avatar size="md" />
<Avatar size="lg" />

Props

NameDescriptionDefault
src
The address of the image for an image avatar or image element
string
-
alt
This attribute defines the alternative text describing the image
string
"avatar"
text
Alternative text to show if src is not provided
string
-
shape
The shape of the avatar
"square""circle"
-
size
The size of the avatar
"sm""md""lg"
-
color
Color of the avatar as a string in case src is not used
string
-