import {Avatar, Stack} from '@primer/react-brand'Examples
Default
<Avatar src="/images/avatar-mona.png" alt="Mona profile" />
Sizes
The size of the avatar can be controlled by the size prop.
<Stack direction="horizontal" alignItems="center" justifyContent="center" gap="spacious" style={{height: 200}}> <Avatar size={32} src="/images/avatar-mona.png" alt="Mona avatar at 32px" /> <Avatar size={40} src="/images/avatar-mona.png" alt="Mona avatar at 40px" /> <Avatar size={48} src="/images/avatar-mona.png" alt="Mona avatar at 48px" /> <Avatar size={64} src="/images/avatar-mona.png" alt="Mona avatar at 64px" /> <Avatar size={80} src="/images/avatar-mona.png" alt="Mona avatar at 80px" /> </Stack>
Responsive Sizes
Passing an Object of a particular shape will allow granular control of size at various supported breakpoints.
Supported breakpoints are narrow, regular and wide.
The Object value does not require all properties be passed, but rather operates on the basis of min-width.
E.g. Providing only narrow will apply that value to all larger breakpoints, but not the other way.
<Avatar size={{narrow: 32, regular: 40, wide: 80}} src="/images/avatar-mona.png" alt="Mona avatar at 32px" />
Shapes
The shape of the avatar can be controlled by the shape prop.
<Stack direction="horizontal" alignItems="center" justifyContent="center" gap="spacious" style={{height: 200}}> <Avatar size={64} shape="circle" src="/images/avatar-mona.png" alt="A circular avatar picture" /> <Avatar size={64} shape="square" src="/images/avatar-mona.png" alt="A square avatar picture" /> </Stack>
Component props
Avatar Required
| name | type | default | required | description |
|---|---|---|---|---|
alt | string | true | The alt text of the image | |
className | string | false | Avatar custom class | |
size | 32, 40, 48, 64, 80 | 40 | false | The size (in pixels) of the image |
shape | 'circle', 'square' | circle | false | The shape of the image |
src | string | true | A url to the person’s image |