Avatar
Import
import { Avatar, getInitials } from "@cfa/react-core";Live Editor
Guidelines
When to use
- Avatar is for a person or account, shown as a photo or initials.
Do
- Size the avatar to match the surrounding content, such as a list row, heading, or compact attribution.
- When showing a stack, show 3 to 5 avatars and use +N for the rest.
- Show meaningful initials when no image is available or the image fails to load.
Avoid
- Using Avatar as a generic icon placeholder. Use Icon for graphics that do not represent a person or account.
Examples
Fallback
The <Avatar.Fallback /> is defaulted to the <User /> icon from @cfa/icons/system. You may also pass in your own fallback of an text or icon.
Initials from a name
Use the getInitials utility to derive initials from a display name.
Titles and suffixes such as “Dr.”, “Jr.”, or “III” are not stripped. Pass explicit initials when the display name includes them. See getInitials for the full behavior table and edge cases.
Image
Use <Avatar.Image /> to pass a custom image to the Avatar.
Size
The size prop has four options: "md" as default, and "xs", "sm", and "lg".
Variant
The variant prop has two options: "filled" as default, and "outlined".
Color
The optional color prop applies a brand accent to fallback initials and icons. Omit color to inherit brand colors from the surrounding app theme.
The following options are available: "red" | "navy" | "blue" | "purple" | "darkGreen" | "darkPurple" | "darkGray" | "cream" | "pink" | "gray" | "yellow" | "lightYellow" | "lightBlue" | "lightGreen" | "lightOrange". green is omitted because accent green does not meet WCAG AA contrast for fallback text. Use darkGreen or lightGreen instead.
With Tooltip
Using a Tooltip with the Avatar requires the use of the Focusable component or wrapping the Avatar in a BaseButton.