Skip to main content

Avatar

Overview#

Avatar component is used to display circular user profile picture, first letter of name or icon.

letterperson

<uxf-avatar rounded="true" size="lg" variant="success" color="light">letter</uxf-avatar><uxf-avatar rounded="true" size="lg" ><img src="https://source.unsplash.com/random/200x200" /></uxf-avatar><uxf-avatar rounded="true" size="lg" variant="primary" color="white"><uxf-icon>person</uxf-icon></uxf-avatar>

Letter Avatar#

Letter Avatar can be created by passing a string as children.

letteravatarexample

<uxf-avatar color="dark">letter</uxf-avatar><uxf-avatar variant="danger">avatar</uxf-avatar><uxf-avatar variant="success">example</uxf-avatar>

Icon Avatar#

Icon Avatar can be created by passing an icon as children.

persondonethumb_up_off_alt

<uxf-avatar variant="warning"><uxf-icon>person</uxf-icon></uxf-avatar><uxf-avatar><uxf-icon>done</uxf-icon></uxf-avatar><uxf-avatar variant="danger"><uxf-icon>thumb_up_off_alt</uxf-icon></uxf-avatar>

Image Avatar#

Image Avatar can be created by passing an image as children.


<uxf-avatar size="md"><img src="https://source.unsplash.com/random/200x200" /></uxf-avatar><uxf-avatar size="lg"><img src="https://source.unsplash.com/random/200x200" /></uxf-avatar><uxf-avatar size="xl"><img src="https://source.unsplash.com/random/200x200" /></uxf-avatar>

Variant#

Avatars include various options for customizing their backgrounds.

avataravataravataravataravataravataravataravatar

<uxf-avatar variant="primary">avatar</uxf-avatar><uxf-avatar variant="secondary">avatar</uxf-avatar><uxf-avatar variant="success">avatar</uxf-avatar><uxf-avatar variant="danger">avatar</uxf-avatar><uxf-avatar variant="warning">avatar</uxf-avatar><uxf-avatar variant="info">avatar</uxf-avatar><uxf-avatar variant="light" color="dark">avatar</uxf-avatar><uxf-avatar variant="dark">avatar</uxf-avatar>

Font color#

Avatars include various options for customizing their font color.

avataravataravataravataravataravataravataravataravataravatar

<uxf-avatar color="primary">avatar</uxf-avatar><uxf-avatar variant="info" color="secondary">avatar</uxf-avatar><uxf-avatar color="success">avatar</uxf-avatar><uxf-avatar color="danger">avatar</uxf-avatar><uxf-avatar color="warning">avatar</uxf-avatar><uxf-avatar color="info">avatar</uxf-avatar><uxf-avatar color="light">avatar</uxf-avatar><uxf-avatar color="dark">avatar</uxf-avatar><uxf-avatar variant="info" color="muted">avatar</uxf-avatar><uxf-avatar color="white">avatar</uxf-avatar>

Sizing#

You can set size by supplying size property.

avataravataravataravataravataravatar

<uxf-avatar variant="info" size="xs">avatar</uxf-avatar><uxf-avatar variant="info" size="sm">avatar</uxf-avatar><uxf-avatar variant="info" size="md">avatar</uxf-avatar><uxf-avatar variant="info" size="lg">avatar</uxf-avatar><uxf-avatar variant="info" size="xl">avatar</uxf-avatar><uxf-avatar variant="info" size="xxl">avatar</uxf-avatar>

Shape#

You can set shape by supplying rounded property.

avataravatar

<uxf-avatar variant="primary" rounded="true">avatar</uxf-avatar><uxf-avatar variant="primary" rounded="false">avatar</uxf-avatar>