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.
Rules For Developers
- The asset can be styled with
iconClassNameandimageClassNameprops. 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.
Rules For Designers
Avatar.VARIANT.DEFAULTusescolor-fill-primaryas foreground,color-surface-primaryas background, andcolor-border-secondaryas border.Avatar.VARIANT.BORDERLESSuses a strong product colour as foreground, a weak product colour as background, and no border.Avatar.VARIANT.DARKusescolor-whiteas 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.
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.
With Badges
To add a small badge, use the badgeIcon prop.