Avatar
A component displaying a photo or, in the absence of a photo, the user's initials.
AvatarBosons
Size
Responsible for the size of the image.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xl, fullPath
Specifies the path to the image file.
type:
stringAlt
required
A string of characters from which initials are created in the absence of a photo.
type:
stringShape
By default, the avatar is in the shape of a circle. Setting this prop to true makes it square in shape with rounded corners..
type:
stringdefault:
circlevalues:
square, circleExamples
Avatars in different sizes
xs
sm
md
lg
xl
1// Example in md size
2
3@atoms.Avatar(
4 &atoms.AvatarBosons{
5 Path: "https://avatars.githubusercontent.com/u/213058?v=4",
6 Size: "md",
7 Alt: "Radosław Muszyński",
8 },
9)Avatar that matches its parent element (100x100 px box)
path
initials
RM
1// Example that matches its parent element, with square variant
2
3@atoms.Avatar(
4 &atoms.AvatarBosons{
5 Size: "full",
6 Path: "https://avatars.githubusercontent.com/u/213058?v=4",
7 Alt: "Radosław Muszyński",
8 Shape: "square",
9 },
10)
11@atoms.Avatar(
12 &atoms.AvatarBosons{
13 Size: "full",
14 Alt: "Radosław Muszyński",
15 Shape: "square",
16 },
17)Without a path to the image, with initials
xs
RM
sm
RM
md
RM
lg
RM
xl
RM
1// Example without a path to the image, with initials
2
3@atoms.Avatar(
4 &atoms.AvatarBosons{
5 Alt: "Radosław Muszyński",
6 },
7)