Avatar — Vortex Design System

<Avatar
  initials="VX"
  size="lg"
  color="neutral"
  type="default"
  rounded={false}
/>

Features

Supports image, initials, and icon content.
Supports responsive sizes.
Supports default and faded types.
Supports semantic colors for initials and icon avatars.
Can display onlineIndicator and verified states.
Includes compound components for names and helper text.

Content

Avatar can render an image, initials, or icon. Use alt when rendering an image.

<Avatar src="https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg" alt="Bonnie Hong" />
<Avatar initials="VX" color="primary" />
<Avatar icon={Hexagon} color="neutral" />

Sizes

Avatar is available in six sizes: xs, sm, md, lg, xl, and 2xl. The default size is lg.

<Avatar initials="VX" size="xs" />
<Avatar initials="VX" size="sm" />
<Avatar initials="VX" size="md" />
<Avatar initials="VX" size="lg" />
<Avatar initials="VX" size="xl" />
<Avatar initials="VX" size="2xl" />

Avatar can adapt its size responsively according to the breakpoint.

<Avatar
  src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg"
  alt="Ugi Stelmokaitis"
  size={{ xs: "sm", sm: "2xl" }}
/>

Shape

Avatar is square by default. Use rounded to render a circular avatar.

<Avatar src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" />
<Avatar rounded src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" />
<Avatar initials="VX" color="neutral" />
<Avatar rounded initials="VX" color="neutral" />

Type

Avatar has two visual styles: default and faded. The default type is default.

<Avatar icon={Hexagon} color="neutral" type="default" />
<Avatar icon={Hexagon} color="neutral" type="faded" />

Color

Use color to set the background color for initials and icon avatars.

<Avatar icon={Hexagon} color="neutral" />
<Avatar icon={Hexagon} color="primary" />
<Avatar icon={Hexagon} color="info" />
<Avatar icon={Hexagon} color="success" />
<Avatar icon={Hexagon} color="warning" />
<Avatar icon={Hexagon} color="critical" />

<Avatar icon={Hexagon} color="neutral" type="faded" />
<Avatar icon={Hexagon} color="primary" type="faded" />
<Avatar icon={Hexagon} color="info" type="faded" />
<Avatar icon={Hexagon} color="success" type="faded" />
<Avatar icon={Hexagon} color="warning" type="faded" />
<Avatar icon={Hexagon} color="critical" type="faded" />

Online Indicator

Use onlineIndicator to show presence on an avatar.

<Avatar src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" onlineIndicator />
<Avatar rounded src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" onlineIndicator />

Verified

Use verified to show a verified state on image avatars.

<Avatar src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" verified />
<Avatar rounded src="https://pbs.twimg.com/profile_images/1936983814116638720/G3kbEPZY_400x400.jpg" alt="Ugi Stelmokaitis" verified />

Compound Usage

Use Avatar.Root with Avatar.Item, Avatar.Content, Avatar.Title, and Avatar.HelperText to align an avatar with adjacent text. Avatar.Root controls the size for its avatar and text children.

Bonnie Hong

Principal Product Designer

Ugi Stelmokaitis

Design Engineer

<Avatar.Root size="lg">
  <Avatar.Item src="https://pbs.twimg.com/profile_images/1536360219147907073/RX64EVOE_400x400.jpg" alt="Bonnie Hong" />
  <Avatar.Content>
      <Avatar.Title>Bonnie Hong</Avatar.Title>
      <Avatar.HelperText>Principal Product Designer</Avatar.HelperText>
  </Avatar.Content>
</Avatar.Root>

Accessibility

Avatar uses accessible image text when src is provided and presents initials or icons as visual identity marks.

Description

Provide alt when src is used so the image has an accessible description.

Use initials or icon when an image is unavailable or not needed.

Use Avatar.Title and Avatar.HelperText with Avatar.Root when the avatar needs adjacent name and supporting text.