Avatar
Avatars are used to represent users or entities in a system.
- Can use an image, name, or icon to represent a user or entity
- Can use any cerberus gradient color
- Images should be square and are the highest priority
- Names should be used when images and are not available
- Icons should be used when images or nanes are not available
Example
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
Usage
- Used in places like:
- Profiles
- Lists
- Forms
- Cards
Common Usage
You can use Avatars in most places where you need to represent a user or entity. They can be used with images, names, or icons.
Red Avatars
Red avatars are used to represent an invalid state. They are used to communicate that something is wrong or that an action is destructive.
On this page
import { Avatar } from '@cerberus/react'Usage
As Prop
You can use the as prop to render the Avatar component as a different element.
Style Customization
You can customize the avatar by utilizing the cx function.
Default Icon Customization
You can customize the default icon that shows by adding the avatar property to the defineIcons function at the root level of your app.
import { defineIcons } from '@cerberus/react'import { CircleUser } from 'lucide-react'
defineIcons({ avatar: CircleUser,})API
export type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> & { ariaLabel: string as?: never icon?: ReactNode src: string width?: number height?: number}export type AvatarAsProps = { as: ReactNode ariaLabel?: never icon?: ReactNode src?: never width?: never height?: never}
export type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> & AvatarVariantProps) & (AvatarImageProps | AvatarAsProps)
define function Avatar(props: AvatarProps): ReactNodeProps
The Avatar component accepts the following props:
| Name | Default | Description |
|---|---|---|
| ariaLabel | The name of the avatar entity. | |
| src | The source of the image. | |
| as | A differnet element to render as the avatar. | |
| height | The height of the avatar. | |
| icon | A custom icon to render as fallback. | |
| width | The width of the avatar. |
On this page
Use Cases
- Users should be able to:
- Identify the user or entity
- Understand the context of the user or entity
- Interact with the user or entity
Interaction & Style
Similarly styled components shouldn't be used together if they don't each pass the 3:1 contrast ratio. Higher contrast helps differentiate between a group of similar components.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Focus lands on link version of an avatar |
| Space / Enter | Activates the link |
On this page