Avatar

Updated:

Add additional visual information about a user, account, or other data groupings.

Currently, the following options are supported. They should be used in the following order:

  • Image Avatar - displays an image of the user's choice. They should be used above a user's initials and generic avatars to create a more personalized experience.
  • Letter Avatar - displays a user's initials for a personalized experience.
  • Generic Avatar - used if there is an error loading the image or if no image and no name were provided.

Properties

Learn more about properties.

icon

A q2-icon to display as the fallback.

initials

A set of up to four initials to display as capitalized text. Takes priority over name.

name

The name associated with the avatar. The initials of the first and last words provided will display as capital letters.

We recommend always providing a name when you want the avatar to be presented to screen readers.

src

Displays the image provided by the user.

Dependencies

This component uses other components in the Tecton library, including:

  • q2-icon

Dependents

Other components in the Tecton library use this component, including:

  • q2-card

Release Notes

Initial Release

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

The following CSS variables are available to override the default theme styles of the q2-avatarcomponent.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

  • q2-icon