Docebo libraries documentation site
vdevelop
Get Started
Guides
Overview Icons Illustrations Theme
Components
Accordion Avatar Badge Alert Badge Icon Badge Status Blank Slate Button Calendar Card Carousel Chip Data Browser Expandable Content Facet List
Filters
Filter Filter Container Filter Multiple Selection Filter Single Selection Filter Slider Range Selection Filter Slider Selection
Helper Message Icon Illustration
Inputs
Input Autocomplete Input Checkbox Input Checkbox Group Input Combobox Input Date Input Password Input Radio Group Input Rating Input Search Input Select Input Slider Input Text Input Toggle Input Upload
Link List List Listbox List Navigation List Presentation List Sheet List Tablist List Tree Menu Modal Dialog Navigation Notification Pagination Bar Popover Progress Skeleton Stepper Table Toast Tooltip
API References
Components Avatar

Avatar

 Overview API Examples Style Tokens

The Avatar component is a versatile visual element used to represent users, entities, or states through images, initials, or icons. It supports both interactive and non-interactive modes, with extensive customization options.

Basic usage

The Avatar component can display images, text initials, or icons, adapting to different use cases and design requirements.

Component anatomy

Size

The Avatar component comes in seven different sizes to accommodate various layout needs:

  • XXS: Extra extra small
  • XS: Extra small
  • SM: Small
  • MD: Medium
  • LG: Large
  • XL: Extra large
  • XXL: Extra extra large

Shape

The Avatar can be displayed in two different shapes:

  • Rounded: Circular shape
  • Squared: Square shape with optional border radius

Theme

The component supports five theme variants:

  • Neutral: Default theme
  • Brand Alt: Alternative branding
  • Success: Positive states
  • Danger: Error or critical states
  • Alert: Warning states

Interactive State

The Avatar can be interactive, functioning as a button when needed:

  • Supports ripple effect
  • Keyboard navigation
  • Optional tooltip
  • Disabled state support
  • Active state indicator

Content Types

The Avatar supports three types of content:

  1. Image Avatar DEMO HERE

  2. Text Avatar DEMO HERE

  3. Icon Avatar DEMO HERE

Accessibility

ARIA Roles and Attributes

The Avatar component implements comprehensive ARIA support with dynamic attribute management based on context. When interactive, it behaves as a button with appropriate ARIA attributes. The component supports an extensive set of ARIA attributes for maximum flexibility in different accessibility contexts.

Keyboard Navigation

Interactive avatars are fully keyboard accessible, supporting:

  • Tab navigation
  • Space/Enter activation
  • Focus management
  • Ripple effect feedback

Focus Management

Visual indicators clearly show focus state on interactive avatars. The component maintains proper focus management within the page flow and ensures visible focus indicators meet accessibility standards.

Screen Reader Support

The component provides comprehensive screen reader support through:

  • Meaningful ARIA labels
  • Role descriptions
  • State announcements
  • Content relationships

Best Practices for Developers

  1. Image Avatars DEMO HERE

  2. Text Avatars DEMO HERE

  3. Interactive Usage DEMO HERE

  4. Accessibility Labels

Previous
Accordion
Next
Badge Alert