Avatar

Guidelines React

Github Storybook Markdown Copy for LLM

Import

import { Avatar } from "@cfa/react-core";

Live Editor

Examples

Fallback

The <Avatar.Fallback /> is defaulted to the <User /> icon from @cfa/system-icons. You may also pass in your own fallback of an text or icon.

Image

Use <Avatar.Image /> to pass a custom image to the Avatar.

It’s recommended to use an Avatar.Fallback with an image for image paths that are not found or do not load.

Color

Through the color prop there are two color options: "primary" as default, and "secondary".

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".

With Tooltip

Using a Tooltip with the Avatar requires the use of the Focusable component or wrapping the Avatar in a BaseButton.

Props

Visit the Documentation Site for the full list of props.

Avatar.Root

Name	Type	Default	Description
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
children	ReactNode	-	The content or child elements nested within this component.
className	string	-	CSS class names to apply custom styling.
color	"primary" | "secondary"	primary	Color of the Avatar.
id	string	-	The unique identifier for the DOM element.
role	AriaRole	-	The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
size	"xs" | "sm" | "md" | "lg"	md	Size of the Avatar.
style	CSSProperties	-	Inline styles specified as a React-compatible CSS properties object.
variant	"filled" | "outlined"	filled	Filled or outlined Avatar.
key	Key	-	-
ref	Ref<HTMLSpanElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Avatar.Image

Avatar.Fallback