Avatar

Avatars are simple UI elements that display a user's initials.

Overview

Avatars are simple UI elements that display a user's initials.

LightDarkActiveTSTSTS

Usage

The Avatar component can either be displayed statically, or as a link. The Avatar can be used to provide navigation to a user's profile, or to associate a user with a particular set of data.

Anatomy

1TS2
  1. Container. The Container wraps the component.
  2. Initials. A user's initials are displayed in the centre of the component.

Sizing & Spacing

The Avatar component is available in 1 standard size.

States

TSTSTSTS

The Avatar has 2 states - default and hover.

The Avatar component is a simple component that displays the users initials within a circle, with a hover state associated with it.

Basic Usage

RT ST

<Avatar initials="RT" variant={AVATAR_VARIANT.DARK} />
<Avatar initials="ST" variant={AVATAR_VARIANT.LIGHT} />

Avatar Properties

NameTypeRequiredDefaultDescription
classNamestringFalsen/aCustom css class to add to the Avatar element
initialsstringTruen/aThe users initials, a maximum of 2 letters
variantstringFalsen/aVariant of the avatar, can be `dark` or `light`.