You are viewing a PR preview for PR #1506

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
namestringThe name of the person represented by the avatar.
aria-hidden?BooleanishIf true, the element will be hidden from assistive technologies.
aria-label?stringDescribes the element to assistive technologies.
size?"sm" | "md" | "lg" | "xl" | "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.