Avatar

A data display component that renders a user or entity image with an optional fallback visual. 
For more information on this component configuration, visit Radix UI 

Fallback

Sizes

Use the avatar-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind 

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

:root {
  --ex-avatar-font-family: var(--font-sans);
  --ex-avatar-font-weight: var(--font-weight-normal);
 
  --ex-avatar-font-size-sm: var(--text-xs);
  --ex-avatar-font-size-md: var(--text-sm);
  --ex-avatar-font-size-lg: var(--text-base);
  --ex-avatar-font-size-xl: var(--text-lg);
 
  --ex-avatar-size-sm: calc(var(--spacing) * 9);
  --ex-avatar-size-md: calc(var(--spacing) * 10);
  --ex-avatar-size-lg: calc(var(--spacing) * 11);
  --ex-avatar-size-xl: calc(var(--spacing) * 12);
 
  --ex-avatar-radius-sm: 9999px;
  --ex-avatar-radius-md: 9999px;
  --ex-avatar-radius-lg: 9999px;
  --ex-avatar-radius-xl: 9999px;
}

API

For more information on this component configuration, visit Radix UI 

Avatar

Avatar Image

Avatar Fallback

Avatar Group

A data display component that groups multiple avatars together with overlapping or stacked formatting.

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Customizing

:root {
  --ex-avatar-group-gap-x: calc(var(--spacing) * -3);
  --ex-avatar-group-gap-y: calc(var(--spacing) * -3);
 
  --ex-avatar-group-ring-width: 3px;
  --ex-avatar-group-ring-color: var(--ex-colors-background);
}

API

Avatar Group