Skip to main content
Version: Previous

Web Components - Avatar

The avatar component is used to graphically represent a user or an object.

Set-up​

import { provideDesignSystem, alphaAvatar } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaAvatar());

Usage​

Basic usage​

Live Editor
<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary"></alpha-avatar>
Result
Loading...

Shape​

Live Editor
<alpha-avatar alt="User profile image" link="#" name="John Doe" shape="circle" fill="accent-primary" shape="square"></alpha-avatar>
Result
Loading...

Filled, coloured, and shaped​

The fill and color attributes of the avatar create CSS custom properties, which can be used to style the control.

alpha-avatar {
  --avatar-fill-primary: #0EAFE2;
  --avatar-fill-danger: #ff0000;
  --avatar-color-light: #ffffff;
  --avatar-color-dark: #000000;
}

Use cases​

  • Display an image or text (usually initials) of a user