Avatar
User avatars help to quickly identify people in the system.
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>