UserAvatar

Source: client/lib/theme/vueda-tailwind/display/index.js

Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe.

Vue component: UserAvatar

Slot	Default classes	Description
root	callback	Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe.
initials	font-semibold uppercase leading-none tabular-nums	Uppercase initials text with stable numeric glyphs.

root

Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe.

Callback:

({ tone }) => ({
            class: [
                "relative inline-flex shrink-0 items-center justify-center overflow-hidden",
                "rounded-full select-none",
                {
                    "border border-primary bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-primary":
                        !tone || tone === "primary",
                    "bg-sidebar-accent text-sidebar-foreground": tone === "sidebar",
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/display/UserAvatar.theme.js:18

initials

Uppercase initials text with stable numeric glyphs.

Default classes:

font-semibold uppercase leading-none tabular-nums

Source: client/lib/theme/vueda-tailwind/display/UserAvatar.theme.js:30