Skip to main content

Avatar

Implementation#

import { Avatar } from "slipstream-ui";
const Example = () => <Avatar>I am a message</Avatar>;

Initials#

Example
MM

Image#

Example
avatar
avatar
avatar
<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#

AttributeTypeValueDefault ValueDescription
labelstringPass in initials of user. e.g. "MM"
srcstringe.g. '/avatar.png'Set an image to be the avatar
colorstringe.g. bluegrayDefine color resulting in bg-[color]-300.
colorCustomstringe.g. blueOverrides color with your full background color. e.g. "bg-red-800"
roundedstringnone/sm/md/lg
xl/2xl/3xl/full
sizesm/md/lg/xl
textSizestringxs/sm/md/lg/xl/etc...size basedOverride font size of the size prop