Avatar

The Avatar component adds additional visual information about a user.

When to use

  • When you want to show a user's image along contextual information.
  • When you want to attribute an action to a user.

Accessibility

  • Top level name prop will be set on the <img> element as its alt attribute.
  • If src fails to load, applies aria-label with provided name and role with 'img' to root div element.

Examples

Avatar with className support

JP
Jimmy Page
S
Slash

Avatar with all colors

A
A
B
B
C
C
D
D
E
E
F
F
G
G
H
H
I
I
J
J
K
K
L
L
M
M
N
N
O
O
P
P
Q
Q
R
R
S
S
T
T
U
U
V
V
W
W
X
X
Y
Y
Z
Z

Avatar with available sizes

U
user
U
user
U
user
U
user
U
user
U
user

Avatar with custom sizes

2
24
3
30
4
40
5
50
6
60
7
70
8
80

Avatar in available shapes

U
user
U
user
U
user
U
user

U
user
U
user
U
user
U
user

Avatar with error fallback

S
sm
M
md
L
lg
X
xl
X
xxl
X
xxxl

Avatar with initials

HS
Han Solo
HS
Han Solo
HS
Han Solo
HS
Han Solo

Avatar With Phone Number

+91 8234567890
+91 8234567890
93
+91 3456789012
92
+91 2234567890

Avatar with example overrides

UN
user name #1
BK
beyonce knowles
UN
user name #3
BK
beyonce knowles

Avatar with user icon overrides

+91 4761543218
+91 4761543218

Avatar group

U
user
U
user
U
user
U
user

Avatar group with different spacing

U
user
U
user
U
user
+4
+4
U
user
U
user
U
user
+4
+4
U
user
U
user
U
user
+4
+4

Avatar group max

U
user
U
user
U
user
+2
+2

Avatar group overrides

U
user
U
user
U
user
+2
+2

API

Avatar props

NameTypeDefaultDescription
allowPhoneInitials
boolean
falseWhen Avatar detects name as phone number, it renders userIcon as initials. Setting this to true will display phone number's initial
color
string
Defines the custom color or gradient to be shown in background if the image fails to loads underneath the initials
initials
string
Initials to display when image fails to load.
name
string
Alternative text description of the image.
overrides
custom
Lets you customize all aspects of the component.
shape
'rectangle'| 'circle'
Defines the shape of avatar.
size
number
Defines the width/height of the image. Accepts size labels sm, md, lg and xl, or diameter ( in pixel ).
src
string
Image to display.

You can check the implementation of the component for more details.

Avatar exports

You can import this module like so:

import {Avatar} from 'spaceweb/avatar'

It exports the following components or utility functions:

  • Avatar
  • AvatarGroup
  • StyledAvatar
  • StyledAvatarGroup
  • StyledInitials
  • StyledRoot
  • useAvatarColor