Avatar
Avatar
is a component that displays a profile picture or an icon with initials representing a user.
Theming
The Avatar
is a multi part component.
If you want to change the style of the component, please check here.
export const Avatar: ComponentMultiStyle<"Avatar"> = {baseStyle: {name: {},badge: {borderColor: ["white", "black"],borderWidth: "0.2em",rounded: "full",},container: ({ name: string, colorMode: m, theme: t }) => {const bg = string? randomColor({ string }): mode("gray.200", "gray.500")(m)return {bg,borderColor: ["white", "black"],color: isDark(bg)(t, m) ? "white" : "black",verticalAlign: "top",_loaded: { bg: "inherit" },}},excess: {bg: ["blackAlpha.200", "whiteAlpha.200"],borderColor: ["white", "black"],},group: {},},sizes: {"2xs": ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.4")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.4")} / 2.5)`,h: "4",w: "4",},excess: {fontSize: `calc(${get(t, "sizes.4")} / 2.5)`,h: "4",lineHeight: get(t, "sizes.16"),w: "4",},}),xs: ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.6")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.6")} / 2.5)`,h: "6",w: "6",},excess: { h: "6", w: "6" },}),sm: ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.8")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.8")} / 2.5)`,h: "8",w: "8",},excess: { h: "8", w: "8" },}),md: ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.12")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.12")} / 2.5)`,h: "12",w: "12",},excess: { h: "12", w: "12" },}),lg: ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.16")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.16")} / 2.5)`,h: "16",w: "16",},excess: { h: "16", w: "16" },}),xl: ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.24")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.24")} / 2.5)`,h: "24",w: "24",},excess: { h: "24", w: "24" },}),"2xl": ({ theme: t }) => ({name: {fontSize: `calc(${get(t, "sizes.32")} / 2.5)`,lineHeight: get(t, "sizes.16"),},container: {fontSize: `calc(${get(t, "sizes.32")} / 2.5)`,h: "32",w: "32",},excess: { h: "32", w: "32" },}),},defaultProps: {size: "md",},}
Edit this page on GitHub