Agriculture Design System
Design System for the Export Service


User avatars help to quickly identify people in the system.

View in FigmaView in StorybookView 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
<Avatar name="William Mead" />


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" />


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" />