disabled

placeholder

size

subtitle

title

variant

() => {
  return (
    <Box display="flex" flexDirection="column" alignItems="flex-start" gap="$48">
      <Avatar size="large" alt="Jane Cooper" src="https://picsum.photos/id/64/200" title="Jane Cooper" subtitle="jane@sema4.ai" />
    </Box>
  );
}

Avatar

() => {
  const variants: AvatarVariant[] = ['orange', 'red', 'magenta', 'brand', 'blue', 'green', 'teal', 'purple'];
  return (
    <Box>
      <Box display="flex" justifyContent="center" gap="$32" mb="$48">
        <Avatar size="small" alt="Jane Cooper" src="https://picsum.photos/id/64/200" />
        {variants.map((variant) => (
          <Avatar size="small" variant={variant} placeholder="J" key={variant} />
        ))}
      </Box>
      <Box display="flex" justifyContent="center" gap="$24" mb="$48">
        <Avatar alt="Jane Cooper" src="https://picsum.photos/id/64/200" />
        {variants.map((variant) => (
          <Avatar variant={variant} placeholder="J" key={variant} />
        ))}
      </Box>
      <Box display="flex" gap="$16">
        <Avatar size="large" alt="Jane Cooper" src="https://picsum.photos/id/64/200" />
        {variants.map((variant) => (
          <Avatar size="large" variant={variant} placeholder="J" key={variant} />
        ))}
      </Box>
    </Box>
  );
}

Combination of \`src\`, \`placeholder\` and \`variant\` properties can be used to define a text initials or image based Avatar


Type

() => {
  return (
    <Box display="flex" flexDirection="column" alignItems="center" gap="$48">
      <Box display="flex" gap="$24" justifyContent="center">
        <Avatar
          as="a"
          href="https://sema4.ai"
          target="_blank"
          size="small"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper"
        />
        <Avatar
          as="a"
          href="https://sema4.ai"
          target="_blank"
          size="small"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper disabled"
          disabled
        />
      </Box>
      <Box display="flex" gap="$24" justifyContent="center">
        <Avatar
          as="a"
          href="https://sema4.ai"
          target="_blank"
          size="medium"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper"
        />
        <Avatar
          as="a"
          href="https://sema4.ai"
          target="_blank"
          size="medium"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper disabled"
          disabled
        />
      </Box>
      <Box display="flex" gap="$24" justifyContent="center">
        <Avatar
          as="button"
          size="large"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper"
          subtitle="jane@sema4.ai"
        />
        <Avatar
          as="button"
          size="large"
          alt="Profile"
          src="https://picsum.photos/id/64/200"
          title="Jane Cooper disabled"
          subtitle="jane@sema4.ai"
          disabled
        />
      </Box>
      <Box display="flex" gap="$24" justifyContent="center">
        <Avatar as="button" size="large" variant="blue" placeholder="J" title="Jane Cooper" subtitle="jane@sema4.ai" />
        <Avatar
          as="button"
          size="large"
          variant="blue"
          placeholder="J"
          title="Jane Cooper disabled"
          subtitle="jane@sema4.ai"
          disabled
        />
      </Box>
    </Box>
  );
}

Avatar can be used as an interactive element by defining the \`as\` property


Name	Description	Default
disabled	Disables the interactive avatar	-
placeholder	Avatar placeholder	-
size	The size of the avatar	-
subtitle	Avatar subtitle	-
title	Avatar main title	-
variant	Avatar variant	-

Avatar component

Type

Interactive