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.
Configuration
- Name9.1.0•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.