Library
/
Datadisplay
/
Avatar
The Avatar component is used to represent a user, and display their profile pictures or fallback texts such as initials.
To create an avatar component with an image, pass the image URL as the src
prop.
rx.avatar(src="/logo.jpg")
To display a text such as initials, set the fallback
prop without passing the src
prop.
rx.avatar(fallback="RX")
solid
soft
Accent
Gray
The size
prop controls the size and spacing of the avatar. The acceptable size is from "1"
to "9"
, with "3"
being the default.
rx.flex(
rx.avatar(src="/logo.jpg", fallback="RX", size="1"),
rx.avatar(src="/logo.jpg", fallback="RX", size="2"),
rx.avatar(src="/logo.jpg", fallback="RX", size="3"),
rx.avatar(src="/logo.jpg", fallback="RX"),
rx.avatar(src="/logo.jpg", fallback="RX", size="4"),
rx.avatar(src="/logo.jpg", fallback="RX", size="5"),
rx.avatar(src="/logo.jpg", fallback="RX", size="6"),
rx.avatar(src="/logo.jpg", fallback="RX", size="7"),
rx.avatar(src="/logo.jpg", fallback="RX", size="8"),
spacing="1",
)
The variant
prop controls the visual style of the avatar fallback text. The variant can be "solid"
or "soft"
. The default is "soft"
.
rx.flex(
rx.avatar(fallback="RX", variant="solid"),
rx.avatar(fallback="RX", variant="soft"),
rx.avatar(fallback="RX"),
spacing="2",
)
The color_scheme
prop sets a specific color to the fallback text, ignoring the global theme.
rx.flex(
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.avatar(fallback="RX", color_scheme="cyan"),
rx.avatar(fallback="RX", color_scheme="orange"),
rx.avatar(fallback="RX", color_scheme="crimson"),
spacing="2",
)
The high_contrast
prop increases color contrast of the fallback text with the background.
rx.grid(
rx.avatar(fallback="RX", variant="solid"),
rx.avatar(
fallback="RX", variant="solid", high_contrast=True
),
rx.avatar(fallback="RX", variant="soft"),
rx.avatar(
fallback="RX", variant="soft", high_contrast=True
),
rows="2",
spacing="2",
flow="column",
)
The radius
prop sets specific radius value, ignoring the global theme. It can take values "none" | "small" | "medium" | "large" | "full"
.
rx.grid(
rx.avatar(
src="/logo.jpg", fallback="RX", radius="none"
),
rx.avatar(fallback="RX", radius="none"),
rx.avatar(
src="/logo.jpg", fallback="RX", radius="small"
),
rx.avatar(fallback="RX", radius="small"),
rx.avatar(
src="/logo.jpg", fallback="RX", radius="medium"
),
rx.avatar(fallback="RX", radius="medium"),
rx.avatar(
src="/logo.jpg", fallback="RX", radius="large"
),
rx.avatar(fallback="RX", radius="large"),
rx.avatar(
src="/logo.jpg", fallback="RX", radius="full"
),
rx.avatar(fallback="RX", radius="full"),
rows="2",
spacing="2",
flow="column",
)
The fallback
prop indicates the rendered text when the src
cannot be loaded.
rx.flex(
rx.avatar(fallback="RX"),
rx.avatar(fallback="PC"),
spacing="2",
)
As part of a user profile page, the Avatar component is used to display the user's profile picture, with the fallback text showing the user's initials. Text components displays the user's full name and username handle and a Button component shows the edit profile button.
Reflex User
@reflexuser
rx.flex(
rx.avatar(src="/logo.jpg", fallback="RU", size="9"),
rx.text("Reflex User", weight="bold", size="4"),
rx.text("@reflexuser", color_scheme="gray"),
rx.button(
"Edit Profile",
color_scheme="indigo",
variant="solid",
),
direction="column",
spacing="1",
)
An image element with a fallback for representing the user.
Did you find this useful?