Skip to main content

Avatar

A Shadcn avatar: a round image with a fallback for when it can't be shown.

Example:

shad.Avatar(src="https://github.com/shadcn.png", placeholder="CN")
Avatar
Avatar

Inherits: LayoutControl

Properties

  • bgcolor - The background color behind placeholder.
  • placeholder - The content shown when there is no image, typically the person's initials.
  • size - The width and height of this avatar.
  • src - The image to show: a URL, or a path relative to the app's assets directory.

Example​

Shadcn Avatar​

play_arrowTry Online
import flet_shadcn_ui as shad

import flet as ft


def main(page: ft.Page):
    page.title = "Shadcn Avatar"

    page.add(
        ft.SafeArea(
            content=ft.Row(
                controls=[
                    shad.Avatar(
                        src="https://raw.githubusercontent.com/flet-dev/media/98b6df65ba919f2afef284ba04feb2d78f28e1d1/pictures/avatar-user.png",
                        placeholder="CN",
                    ),
                    shad.Avatar(placeholder="JD"),
                    shad.Avatar(placeholder="AB", size=56),
                    shad.Avatar(
                        placeholder=ft.Icon(shad.LucideIcons.USER, size=20),
                        bgcolor=ft.Colors.PRIMARY_CONTAINER,
                    ),
                ],
            )
        )
    )


if __name__ == "__main__":
    ft.run(main)
avatar
An image, initials and an icon placeholder

Properties​

bgcolorclass-attributeinstance-attribute​

bgcolor: ColorValue | None = None

The background color behind placeholder.

If None, the muted color of the theme is used.

placeholderclass-attributeinstance-attribute​

placeholder: StrOrControl | None = None

The content shown when there is no image, typically the person's initials.

sizeclass-attributeinstance-attribute​

size: Number | None = None

The width and height of this avatar.

If None, defaults to 40.

srcclass-attributeinstance-attribute​

src: str | None = None

The image to show: a URL, or a path relative to the app's assets directory.

If None, or if the image fails to load, placeholder is shown.