import {Avatar, Stack} from '@primer/react-brand'
<Avatarsrc="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona profile"/>
The size of the avatar can be controlled by the size
prop.
<Stackdirection="horizontal"alignItems="center"justifyContent="center"gap="spacious"style={{height: 200}}><Avatarsize={32}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 32px"/><Avatarsize={40}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 40px"/><Avatarsize={48}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 48px"/><Avatarsize={64}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 64px"/><Avatarsize={80}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 80px"/></Stack>
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.
<Avatarsize={{narrow: 32, regular: 40, wide: 80}}src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="Mona avatar at 32px"/>
The shape of the avatar can be controlled by the shape
prop.
<Stackdirection="horizontal"alignItems="center"justifyContent="center"gap="spacious"style={{height: 200}}><Avatarsize={64}shape="circle"src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="A circular avatar picture"/><Avatarsize={64}shape="square"src="https://avatars.githubusercontent.com/u/92997159?v=4"alt="A square avatar picture"/></Stack>
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 'ResponsiveSizeMap' | 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 |