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

() => {
  return (
    <Box>
      <Box display="flex" justifyContent="center" gap="$32" mb="$48">
        <Avatar size="small" variant="blue" placeholder="J" />
        <Avatar size="small" variant="green" placeholder="J" />
        <Avatar size="small" variant="magenta" placeholder="J" />
        <Avatar size="small" variant="teal" placeholder="J" />
        <Avatar size="small" variant="orange" placeholder="J" />
        <Avatar size="small" variant="red" placeholder="J" />
      </Box>
      <Box display="flex" justifyContent="center" gap="$24" mb="$48">
        <Avatar variant="blue" placeholder="J" />
        <Avatar variant="green" placeholder="J" />
        <Avatar variant="magenta" placeholder="J" />
        <Avatar variant="teal" placeholder="J" />
        <Avatar variant="orange" placeholder="J" />
        <Avatar variant="red" placeholder="J" />
      </Box>
      <Box display="flex" gap="$16">
        <Avatar size="large" variant="blue" placeholder="J" />
        <Avatar size="large" variant="green" placeholder="J" />
        <Avatar size="large" variant="magenta" placeholder="J" />
        <Avatar size="large" variant="teal" placeholder="J" />
        <Avatar size="large" variant="orange" placeholder="J" />
        <Avatar size="large" variant="red" placeholder="J" />
      </Box>
    </Box>
  );
}

\`placeholder\` and \`variant\` properties can be used to define a text initials based Avatar


Type

() => {
  return (
    <Box display="flex" flexDirection="column" alignItems="flex-start" gap="$48">
      <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="medium"
        alt="Profile"
        src="https://picsum.photos/id/64/200"
        title="Jane Cooper"
      />
      <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" variant="blue" placeholder="J" title="Jane Cooper" subtitle="jane@sema4.ai" />
    </Box>
  );
}

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


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

Avatar component

Type

Interactive