Avatar - Primer

Ready to use


import {Avatar, Stack} from '@primer/react-brand'

Examples

The size of the avatar can be controlled by the size prop.

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.

The shape of the avatar can be controlled by the shape prop.

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