Agriculture Design System
Beta
Design System for the Export Service

Avatar

User avatars help to quickly identify people in the system.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/avatar';

Usage

Avatar components can be imported via the avatar entrypoint in the @ag.ds-next/react package.

For example:

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

Props

Avatar Props
PropTypeDescription
namestring
The name of the person represented by the avatar.
aria-hidden?Booleanish
If true, the element will be hidden from assistive technologies.
aria-label?string
Describes the element to assistive technologies.
size?"md" | "lg" | "xl" | "sm" | "xxl" | "xxxl"
The size to apply.
tone?"action" | "neutral"
The colour tone to apply.

Source

You can view the full source code for this package on Github.