import { Avatar } from '@uhg-abyss/web/ui/Avatar';<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 | Required | Description |
|---|---|---|---|---|
alt | string | - | - | Sets the Avatar image alternate name or can be used as title for Avatar content |
ariaLabel | string | - | - | Accessible name for the Avatar |
ariaLoadingLabel | string | - | - | Screen reader text describing the loading state of the Button; only used if isLoading is true |
children | React.ReactNode | - | - | The contents of the button component The content of the Avatar (usually initials or icon) |
className | string | - | - | CSS class name to apply to each element within the component |
css | Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>> | - | - | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation |
data-testid | string | - | - | Suffix used to create a unique ID used for automated testing |
disableDefaultProviderProps | boolean | 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. |
href | string | - | - | The href to navigate to The URL to navigate to when the Avatar is clicked |
isActive | boolean | - | - | If true, the Link is considered the active route |
isDisabled | boolean | false | - | If true, the Button is disabled |
isLoading | boolean | false | - | If true, the Button will be in a loading state; ariaLoadingLabel is required when using this prop |
isStandardAnchor | boolean | false | - | If true, ignore router and external Link checks |
onClick | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | - | Callback function executed when the Button is clicked |
openNewWindow | boolean | false | - | If true, the Link opens in a new window. By default, external links will open in a new window. |
routerComponent | React.ComponentType<any> | - | - | Custom router component to use for client-side navigation (e.g., Next.js Link, Gatsby Link, etc.) |
size | string | number | - | - | The size of the Avatar |
src | string | null | - | - | Sets the Avatar image |
variant | AvatarColor | 1 | - | The color scheme of the Avatar |
Avatar Classes
| Class Name | Description |
|---|---|
| .abyss-avatar-root | Avatar root element |
| .abyss-avatar-image | Avatar image element |
| .abyss-avatar-content | Avatar content element (initials or icon) |
| .abyss-avatar-button-root | Avatar button root element |
| .abyss-button-root | Button root element |
| .abyss-button-content-container | Content container element |
| .abyss-button-leading-icon | IconSymbol placed before the button content |
| .abyss-button-new-window-icon | Icon for new window anchor buttons |
| .abyss-button-trailing-icon | IconSymbol placed after the button content |
| .abyss-button-icon-only-icon | IconSymbol placed as the button content (icon-only position) |
| .abyss-button-loading-spinner | LoadingSpinner placed inside the button when `isLoading` is true |
| .abyss-button-active | Button root element when active |
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
Note: 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 |