Avatar
An Avatar is a visual way to represent a person or brand in the product. They can display text, icons, or images.
- To visually represent a person, brand, or product
How to use it
Shape
An Avatar can be a circle or rounded square. See which shape to use.
Size
You have 5 sizes to choose from. The default size is medium
.
Status
A colored ring outside the Avatar indicates a user’s status. The options are away, available, or active.
Type
An Avatar can contain an icon, an image, or text.
![image avatar](https://garden.zendesk.com/components/avatar/user.png)
How to use it well
Select the right shape for the job
Use circles to represent people and rounded squares for objects, brands, or products. This helps a user distinguish between the two when scanning a page.
![](/static/3058f26aa2e29fb2c67cc150c5e8b822/bf7bc/components-avatar-shape-circle.png)
Use a circular Avatar for people.
![](/static/0ec8ee1004c6c44a6e19a4ccd0ce4f9d/bf7bc/components-avatar-shape-square.png)
Use a rounded square Avatar for objects, brands, or Zendesk products.
Configuration
- Name9.5.1•View source•View on npm
- Installnpm install @zendeskgarden/react-avatars
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Avatar } from '@zendeskgarden/react-avatars'
API
The Avatar component follows this structure:
<Avatar>
{/* One of icon, img, or Avatar.Text */}
</Avatar>
Avatar
Extends HTMLAttributes<HTMLElement>
Prop name | Type | Default | Description |
---|---|---|---|
backgroundColor | string | Sets the avatar background color. Accepts a color variable key (i.e. | |
badge | string | number | Sets the badge text and applies active styling | |
foregroundColor | string | Sets the color for child SVG or | |
isSystem | boolean | Applies system styling for representing objects, brands, or products | |
size | 'extraextrasmall' | 'extrasmall' | 'small' | 'medium' | 'large' | 'medium' | Specifies the avatar size |
status | 'available' | 'away' | 'transfers' | 'offline' | Applies status styling | |
statusLabel | string | Specifies the status label | |
surfaceColor | string | Provides surface color for an avatar placed on a non-default background. Accepts a color variable key (i.e. |
Avatar.Text
Extends HTMLAttributes<HTMLSpanElement>
The Text component applies appropriate styles to child text. Nest it within an Avatar component. See type example.