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: string
default: md
values: xs, sm, md, lg, xl, full
Path
Specifies the path to the image file.
type: string
Alt
required
A string of characters from which initials are created in the absence of a photo.
type: string
Shape
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: string
default: circle
values: square, circle

Examples

Avatars in different sizes
xs
Radosław Muszyński
sm
Radosław Muszyński
md
Radosław Muszyński
lg
Radosław Muszyński
xl
Radosław Muszyński
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
Radosław Muszyński
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)

Let's dive deeper and connect!

Hanariu is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.