import { Avatar } from '@uhg-abyss/web/ui/Avatar';() => { return <Avatar>JA</Avatar>;};Clicking the avatar
By default, the Avatar component is read-only, but can be made interactive by configuring it as a button or link.
Use the href prop to create a link avatar (renders as an anchor tag) and the onClick prop to
create a button avatar (renders as a button element). The type prop can be used to specify the button type
when using onClick. When interactive, the Avatar receives focus styles and proper keyboard navigation support.
Avatar image and children
Use the src and alt props to set the Avatar image source and alternate name. If the image cannot be loaded or is not provided, the Avatar will display a placeholder instead. By default, the placeholder is the IconSymbol "person" icon.
Children for the Avatar accepts either a React node or a string. If a string is provided, it will be modified to display the first two characters in uppercase.
Color variants
Use the variant prop to set the color of the Avatar. The available variants are 1, 2, 3, 4, and 5. Each variant has a different color scheme.
Notification
Use the Indicator component in combination with the Avatar to display a notification.
When an indicator is used on a focusable Avatar, make sure to use the ariaLabel prop to provide context to screen readers.
Aria label
Use the ariaLabel prop to provide an accessible name. If an ariaLabel is not provided, by default it will read as avatar for images and icons, and X Y avatar for lettered avatars.
Avatar Props
| Name | Type | Default | A11y | Description |
|---|---|---|---|---|
alt | string | undefined | Sets the Avatar image alternate name or can be used as title for Avatar content | ||
ariaLabel | string | undefined | Accessible name for the Avatar | ||
ariaLoadingLabel | string | undefined | Screen reader text describing the loading state of the Button; only used if isLoading is true | ||
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | The contents of the Button; this text forms its accessible name — in icon-only variants it's rendered visually hidden but still announced to screen readers. The content of the Avatar (usually initials or icon) | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | ((CSSProperties | Partial<Record<"abyss-button-root" | "abyss-button-content-container" | "abyss-button-leading-icon" | "abyss-button-new-window-icon" | "abyss-button-trailing-icon" | "abyss-button-icon-only-icon" | "abyss-button-loading-spinner" | "abyss-button-active", CSSProperties>>) & (CSSProperties | Partial<.... | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | ||
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | false | If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
href | string | undefined | The href to navigate to The URL to navigate to when the Avatar is clicked | ||
isActive | boolean | undefined | If true, the Link is considered the active route | ||
isDisabled | boolean | undefined | false | If true, the Button is disabled | |
isLoading | boolean | undefined | false | If true, the Button will be in a loading state; ariaLoadingLabel is required when using this prop | |
isStandardAnchor | boolean | undefined | false | If true, ignore router and external Link checks | |
onClick | (((event: MouseClickEvent<HTMLButtonElement>) => void) & MouseEventHandler<HTMLDivElement>) | undefined | Callback function executed when the Button is clicked | ||
openNewWindow | boolean | undefined | false | If true, the Link opens in a new window. By default, external links will open in a new window. | |
routerComponent | ComponentType<any> | undefined | Custom router component to use for client-side navigation (e.g., Next.js Link, Gatsby Link, etc.) | ||
size | string | number | undefined | The size of the Avatar | ||
slotProps | Partial<Record<ToSlotKey<{ root: LeafSlotDef<"div", undefined>; image: LeafSlotDef<"img", undefined>; content: LeafSlotDef<"span", undefined>; buttonRoot: LeafSlotDef<...>; }, "avatar">, SlotPropsLeafValue>> | undefined | |||
src | string | null | undefined | Sets the Avatar image | ||
variant | AvatarColor | undefined | 1 | The color scheme of the Avatar | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Avatar Classes
| Class Name | Description |
|---|---|
| .abyss-avatar-button-root | Avatar button root element |
| .abyss-avatar-content | Avatar content element (initials or icon) |
| .abyss-avatar-image | Avatar image element |
| .abyss-avatar-root | Avatar root element |
| .abyss-button-active | Button root element when active. |
| .abyss-button-content-container | Content container element. |
| .abyss-button-icon-only-icon | IconSymbol used as the button content. |
| .abyss-button-leading-icon | IconSymbol placed before the button content. |
| .abyss-button-loading-spinner | LoadingSpinner rendered while the button is loading. |
| .abyss-button-new-window-icon | Icon for new-window anchor buttons. |
| .abyss-button-root | Button root element. |
| .abyss-button-trailing-icon | IconSymbol placed after the button content. |
Avatars are not focusable, use the ariaLabel prop for providing an accessible name. If an ariaLabel is not provided, by default it will read as avatar for images and icons. For initial lettered avatars it will read as X Y avatar.
Aria Label
Below is an example usage of passing ariaLabel to different avatar types.
Component Tokens
Click on the token row to copy the token to your clipboard.
Avatar Tokens
| Token Name | Value | |
|---|---|---|
| avatar.color.border.container | #002677 | |
| avatar.color.surface.container.1 | #FAFCFF | |
| avatar.color.surface.container.2 | #E5F8FB | |
| avatar.color.surface.container.3 | #FAF8F2 | |
| avatar.color.surface.container.4 | #F0F9ED | |
| avatar.color.surface.container.5 | #002677 | |
| avatar.color.text.label.default | #002677 | |
| avatar.color.text.label.saturated | #FFFFFF | |
| avatar.color.icon.default | #002677 | |
| avatar.color.icon.saturated | #FFFFFF | |
| avatar.border-radius.all.container | 500px | |
| avatar.border-width.all.container | 1px | |
| avatar.sizing.all.icon | 24px | |
| avatar.sizing.width.container | 40px | |
| avatar.sizing.height.container | 40px |