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

Basic usage

Themes

The Avatar component comes with five built-in themes: neutral, accent, success, danger and alert.

Negative mode

The Avatar component supports a negative mode, suitable for areas with dark background.

Shapes

The Avatar component comes with two built-in shapes: squared and rounded.

Sizes

The Avatar component comes with seven built-in sizes.

Interaction

The Avatar component can be configured to be clickable.

Disabled state

When the Avatar is clickable, it can also have a Disabled state, to be used when the connected action is not available.

Active state

When your Avatar represents a switch or a toggle, you can take advantage of its Active state to let the user know the current selection value.

Previous
Accordion
Next
Badge Alert