Avatar

Implementation

import { Avatar } from "slipstream-ui";

const Example = () => <Avatar>I am a message</Avatar>;

Initials

Example

MM

Image

Example

<Alert label="MM"/>

Sizing

Example

xl

lg

md

sm

<Alert label="xl" size="xl"/>

Rounded

Example

full

3xl

2xl

xl

lg

md

sm

none

<Alert label="full" size="lg" rounded="full"/>

Custom Color

Example

CC

<Avatar label="CC" color="bg-purple-700" colorCustom/>

Custom Text Size

Example

TS

<Avatar label="TS" textSize="xs" />

Props

Attribute	Type	Value	Default Value	Description
label	string			Pass in initials of user. e.g. "MM"
src	string	e.g. '/avatar.png'		Set an image to be the avatar
color	string	e.g. blue	gray	Define color resulting in bg-[color]-300.
colorCustom	string	e.g. blue		Overrides color with your full background color. e.g. "bg-red-800"
rounded	string	none/sm/md/lg xl/2xl/3xl/full
size		sm/md/lg/xl
textSize	string	xs/sm/md/lg/xl/etc...	size based	Override font size of the size prop