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.
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.
Use a circular Avatar for people.
Use a rounded square Avatar for objects, brands, or Zendesk products.
Configuration
- Name9.0.0-next.26•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. background.emphasis) to render based on light/dark mode, or any hex value. | |
badge | string | number | Sets the badge text and applies active styling | |
foregroundColor | string | Sets the color for child SVG or Avatar.Text components. Accepts a color variable key (i.e. foreground.onEmphasis) to render based on light/dark mode, or any hex value. | |
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. background.primary) to render based on light/dark mode, or any hex value. |
Avatar.Text
Extends HTMLAttributes<HTMLSpanElement>
The Text component applies appropriate styles to child text. Nest it within an Avatar component. See type example.