Avatar

import { ... } from '@ag.ds-next/react/avatar';

Avatars are used to show a thumbnail representation of an individual.

<Avatar name="William Mead" />

Size

Use the size prop to change the size of the avatar.

<Flex alignItems="center" gap={0.5}>
	<Avatar name="Taj Grainger" size="sm" />
	<Avatar name="Isabel Edmund" size="md" />
	<Avatar name="Ethan Polglaze" size="lg" />
	<Avatar name="Rachel Warlow-Davies" size="xl" />
	<Avatar name="Callum Lascelles" size="xxl" />
	<Avatar name="William Mead" size="xxxl" />
</Flex>

Tone

Avatar supports two tones: neutral and action.

Use the action tone if the Avatar is used within an interactive element such as a button or link.

<Flex alignItems="center" gap={0.5}>
	<Avatar name="William Mead" tone="neutral" />
	<Avatar name="William Mead" tone="action" />
</Flex>

Colour

AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background, the light palette variant is displayed.

This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA 4.5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).

<Fragment>
	<Box padding={1.5}>
		<Avatar name="William Mead" tone="action" />
	</Box>

	<Box background="body" padding={1.5} palette="dark">
		<Avatar name="William Mead" tone="action" />
	</Box>
</Fragment>