Library
/
Chakra
/
Media
/
Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
BO
DT
JB
rx.chakra.hstack(
rx.chakra.avatar(size="sm"),
rx.chakra.avatar(name="Barack Obama", size="md"),
rx.chakra.avatar(name="Donald Trump", size="lg"),
rx.chakra.avatar(name="Joe Biden", size="xl"),
)Avatar components can be grouped into avatar groups for easier display.
JB
DT
BO
rx.chakra.avatar_group(
rx.chakra.avatar(name="Barack Obama"),
rx.chakra.avatar(name="Donald Trump"),
rx.chakra.avatar(name="Joe Biden"),
)Badges can also be applied to show elements about the avatar such as activity.
DT
BO
rx.chakra.avatar_group(
rx.chakra.avatar(
rx.chakra.avatar_badge(
box_size="1.25em",
bg="green.500",
border_color="green.500",
),
name="Barack Obama",
),
rx.chakra.avatar(
rx.chakra.avatar_badge(
box_size="1.25em",
bg="yellow.500",
border_color="red.500",
),
name="Donald Trump",
),
)If there are too many avatar to display a limit can be set using the max_ prop.
+2
BO
BO
BO
rx.chakra.avatar_group(
*([rx.chakra.avatar(name="Barack Obama")] * 5),
size="md",
max_=3,
)A wrapper that displays its content on the right corner of the avatar.
Props
No component specific props
Event Triggers
See the full list of default event triggersA wrapper to stack multiple Avatars together.
Event Triggers
See the full list of default event triggersDid you find this useful?
No
Yes
