Avatar

Personalize your application with avatars

Use the Avatar component with photographs, illustrations, or initials to personalize and identify users within your application. Pass multiple image paths to create avatar groups.

Preview

---
import { Avatar } from 'webcoreui/astro'
---

<Avatar img="/img/avatar.png" />

<script>
    import { Avatar } from 'webcoreui/svelte'
</script>

<Avatar img="/img/avatar.png" />

import React from 'react'
import { Avatar } from 'webcoreui/react'

const Component = () => <Avatar img="/img/avatar.png" />

export default Component

Colors

To style border colors, specify the borderColor property. To remove borders, set borderless to true:

<Avatar img="/img/avatar0.png" borderColor="#FFF" />
<Avatar img="/img/avatar1.png" borderColor="#ee5253" />
<Avatar img="/img/avatar2.png" borderColor="#48dbfb" />
<Avatar img="/img/avatar3.png" borderless={true} />

However, if you need to use the same border color for your avatars throughout your application, the preferred way to set border colors globally, is to override the following CSS variable:

html body {
    --w-avatar-border: #000;
}

Avatar Groups

The Avatar component can also be used to create avatar groups. The img prop can also accept an array of strings.

Default

Reverse order

Borderless group

---
import { Avatar } from 'webcoreui/astro'

const group = [
    '/img/avatar0.png',
    '/img/avatar1.png',
    '/img/avatar2.png',
    '/img/avatar3.png',
    '/img/avatar4.png'
]
---

<Avatar img={group} />
<Avatar img={group} reverse={true} />
<Avatar img={group} borderless={true} />

<script>
    import { Avatar } from 'webcoreui/svelte'

    const group = [
        '/img/avatar0.png',
        '/img/avatar1.png',
        '/img/avatar2.png',
        '/img/avatar3.png',
        '/img/avatar4.png'
    ]
</script>

<Avatar img={group} />
<Avatar img={group} reverse={true} />
<Avatar img={group} borderless={true} />

import React from 'react'
import { Avatar } from 'webcoreui/react'

const group = [
    '/img/avatar0.png',
    '/img/avatar1.png',
    '/img/avatar2.png',
    '/img/avatar3.png',
    '/img/avatar4.png'
]

const Component = () => (
    <React.Fragment>
        <Avatar img={group} />
        <Avatar img={group} reverse={true} />
        <Avatar img={group} borderless={true} />
    </React.Fragment>
)

export default Component

Sizes

You can also set sizes through the size prop which accepts a number, or an array of numbers in case an avatar group is used:

Increasing sizes

Decreasing sizes

Varying sizes

<Avatar img={group} size={[35, 40, 45, 50, 55]} />
<Avatar img={group} size={[55, 50, 45, 40, 35]} />
<Avatar img={group} size={[30, 40, 50, 40, 30]} />

API

type AvatarProps = {
    img: string | string[]
    alt?: string | string[]
    size?: number | number[]
    lazy?: boolean
    borderColor?: string
    borderless?: boolean
    reverse?: boolean
    className?: string
    groupClassName?: string
}

Prop	Default	Purpose
`img`	`-`	Specifies the image path to your avatar. Can be a string or an array of strings.
`alt`	`-`	Specifies the `alt` attribute for the image. Can be a string or an array of strings.
`size`	`40`	Sets the size of the image. Can be a number or an array of numbers for avatar groups.
`lazy`	`true`	Specifies whether to lazy load images.
`borderColor`	`-`	Sets the image border color. Defaults to the background color.
`borderless`	`false`	Removes border from images.
`reverse`	`false`	Reverse avatar group order.
`className`	`-`	Pass additional CSS classes for your avatars.
`groupClassName`	`-`	Pass additional CSS classes for the avatar group container.

<- Alert Badge ->

Request improvement for this page