Avatar

User avatars help to quickly identify people in the system.

View in Figma View in Storybook View in Github

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

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

Open in Playroom, opens in a new tab Open responsive preview

<Avatar name="William Mead" />

Size

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

Open in Playroom, opens in a new tab Open responsive preview

<Flex alignItems="center" flexWrap="wrap" 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.

Open in Playroom, opens in a new tab Open responsive preview

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

Inside an interactive element

An avatar can be incorporated within interactive elements like an account dropdown menu. Ensure the interactive element has a meaningful accessible name. For example, if the button opens account options, ensure the button with the avatar name includes the purpose of the element in its accessible name.

Open in Playroom, opens in a new tab Open responsive preview

() => {
	return (
		<DropdownMenu>
			<Flex
				css={{
					background: boxPalette.backgroundBody,
					display: 'inline-block',
					'&:hover': {
						backgroundColor: boxPalette.backgroundShade,
					},
				}}
				padding={1}
			>
				<DropdownMenuButton
					css={{
						textDecoration: 'none',
					}}
				>
					{/** import { VisuallyHidden } from '@ag.ds-next/react/a11y'; */}
					<VisuallyHidden>
						Account menu {boxPalette.backgroundShade}
					</VisuallyHidden>
					<Flex
						alignItems="center"
						aria-hidden
						as="span"
						gap={0.5}
						width="100%"
					>
						<Avatar name="Jane Smith" size="md" tone="action" />
						<Flex
							as="span"
							css={{ overflow: 'hidden' }}
							flexDirection="column"
							width="100%"
						>
							<Text color="action" fontSize="xs" fontWeight="bold">
								Jane Smith
							</Text>
							<Text color="muted" fontSize="xs">
								Entity name
							</Text>
						</Flex>
					</Flex>
				</DropdownMenuButton>
			</Flex>
			<DropdownMenuPanel>
				<DropdownMenuItem onClick={() => console.log('Profile')}>
					Profile
				</DropdownMenuItem>
				<DropdownMenuItem onClick={() => console.log('Messages')}>
					Messages
				</DropdownMenuItem>
				<DropdownMenuItem onClick={() => console.log('Account settings')}>
					Account settings
				</DropdownMenuItem>
			</DropdownMenuPanel>
		</DropdownMenu>
	);
};

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).

Light palette

Open in Playroom, opens in a new tab Open responsive preview

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5}>
	<Stack gap={1.5}>
		<H4>Avatar: on light background</H4>
		<Flex alignItems="center" flexWrap="wrap" gap={0.5}>
			<Avatar name="Taj Grainger" size="sm" tone="action" />
			<Avatar name="Isabel Edmund" size="md" tone="action" />
			<Avatar name="Ethan Polglaze" size="lg" tone="action" />
			<Avatar name="Rachel Warlow-Davies" size="xl" tone="action" />
			<Avatar name="Callum Lascelles" size="xxl" tone="action" />
			<Avatar name="William Mead" size="xxxl" tone="action" />
		</Flex>
		<Flex alignItems="center" flexWrap="wrap" gap={0.5}>
			<Avatar name="Taj Grainger" size="sm" tone="neutral" />
			<Avatar name="Isabel Edmund" size="md" tone="neutral" />
			<Avatar name="Ethan Polglaze" size="lg" tone="neutral" />
			<Avatar name="Rachel Warlow-Davies" size="xl" tone="neutral" />
			<Avatar name="Callum Lascelles" size="xxl" tone="neutral" />
			<Avatar name="William Mead" size="xxxl" tone="neutral" />
		</Flex>
	</Stack>
</Box>

Dark palette

Open in Playroom, opens in a new tab Open responsive preview

<Box background="body" paddingX={{ xs: 0.75, md: 1.5 }} paddingY={1.5} palette="dark">
	<Stack gap={1.5}>
		<H4>Avatar: on dark background</H4>
		<Flex alignItems="center" flexWrap="wrap" gap={0.5}>
			<Avatar name="Taj Grainger" size="sm" tone="action" />
			<Avatar name="Isabel Edmund" size="md" tone="action" />
			<Avatar name="Ethan Polglaze" size="lg" tone="action" />
			<Avatar name="Rachel Warlow-Davies" size="xl" tone="action" />
			<Avatar name="Callum Lascelles" size="xxl" tone="action" />
			<Avatar name="William Mead" size="xxxl" tone="action" />
		</Flex>
		<Flex alignItems="center" flexWrap="wrap" gap={0.5}>
			<Avatar name="Taj Grainger" size="sm" tone="neutral" />
			<Avatar name="Isabel Edmund" size="md" tone="neutral" />
			<Avatar name="Ethan Polglaze" size="lg" tone="neutral" />
			<Avatar name="Rachel Warlow-Davies" size="xl" tone="neutral" />
			<Avatar name="Callum Lascelles" size="xxl" tone="neutral" />
			<Avatar name="William Mead" size="xxxl" tone="neutral" />
		</Flex>
	</Stack>
</Box>

Edit this page