Search documentation v0.6.1

Avatar

Personalize your application with avatars

Source ↗️ Report Issue ↗️

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
Avatar
How to use Avatars in Astro
---
import { Avatar } from 'webcoreui/astro'
---
<Avatar img="/img/avatar.png" />
How to use Avatars in Svelte
<script>
import { Avatar } from 'webcoreui/svelte'
</script>
<Avatar img="/img/avatar.png" />
How to use Avatars in React
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:

AvatarAvatarAvatarAvatar
<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
AvatarAvatarAvatarAvatarAvatar
Reverse order
AvatarAvatarAvatarAvatarAvatar
Borderless group
AvatarAvatarAvatarAvatarAvatar
---
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
AvatarAvatarAvatarAvatarAvatar
Decreasing sizes
AvatarAvatarAvatarAvatarAvatar
Varying sizes
AvatarAvatarAvatarAvatarAvatar
<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
}
PropDefaultPurpose
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.

Request improvement for this page