Avatar

Open in Storybook Open in Figma

George often makes use of circular images that feature a round semi-transparent border. They are created using the .g-avatar class.

While you can combine all styles/sizes using the classes below, not all combinations are valid to be used in George. See the Avatar examples for all valid combinations.

Icons and Images

We distinguish between icons and images. The latter are usually raster images, but vector images may be specified as well.

Loading demo…

Rules For Developers

The asset can be styled with iconClassName and imageClassName props. This makes it possible to e.g. add a padding to avoid cropping a company logo

Variants and colours

To change the colours of an Avatar, use the props variant, color, and backgroundColor.

Loading demo…

Rules For Designers

Avatar.VARIANT.DEFAULT uses color-fill-primary as foreground, color-surface-primary as background, and color-border-secondary as border.
Avatar.VARIANT.BORDERLESS uses a strong product colour as foreground, a weak product colour as background, and no border.
Avatar.VARIANT.DARK uses color-white as foreground, a product colour as background, and no border.

These are the supported combinations:

Variant	Foreground	Background	Border
DEFAULT	`color-fill-primary`	`color-surface-primary`	`color-border-secondary`
BORDERLESS	`color-PRODUCT_COLOR-strong`	`color-PRODUCT_COLOR-weak`	None
DARK	`color-white`	`color-PRODUCT_COLOR`	None

Sizes

To change the size of an Avatar, use the size prop.

Loading demo…

Interactivity

To turn an Avatar into an interactive element, place it inside an unstyled button.

The button must have the .g-button-avatar modifier class and an aria-label (because the avatar has no alt text information). You may specify an icon on the button, which will be revealed on focus and hover.

REACT-ONLY No need to set unstyled and .g-button-avatar; Button is Avatar-aware, i.e. does it by default.

DEPRECATED In earlier versions of Avatar, .g-avatar-hover was used to achieve this effect.

Loading demo…

With Badges

To add a small badge, use the badgeIcon prop.

Loading demo…