component

Avatar

An avatar component with a fallback for initials.

Usage

import { Avatar } from '@backstage/ui';

<Avatar
  src="https://avatars.githubusercontent.com/u/1540635?v=4"
  name="Charles de Dreuille"
/>

API reference

Prop	Type	Default	Responsive
src	string	-	No
name	string	-	No
size	smallmediumlarge	medium	Yes
className	string	-	No
style	CSSProperties	-	No

Examples

Sizes

Avatar sizes can be set using the size prop.

CDCDCD

<Flex gap="4" direction="column">
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="small"
  />
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="medium"
  />
  <Avatar
    src="https://avatars.githubusercontent.com/u/1540635?v=4"
    name="Charles de Dreuille" size="large"
  />
</Flex>

Fallback

If the image is not available, the avatar will show the initials of the name.

<Avatar
  src="https://avatars.githubusercontent.com/u/15406AAAAAAAAA"
  name="Charles de Dreuille"
/>

Theming

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-AvatarRoot
bui-AvatarRoot[data-size="small"]
bui-AvatarRoot[data-size="medium"]
bui-AvatarRoot[data-size="large"]
bui-AvatarImage
bui-AvatarFallback

Changelog

0.3.0 - Add Avatar component #29594