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 Chip

Chip

 Overview API Examples Style Tokens

Basic usage

Negative

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

Content

Chips can be configured to contain text only, or a combination of text and icon or text and avatar.

Chips can also be used as links. If the target of the link is “_blank”, a corresponding icon is automatically added for accessibility purposes.

Sizes

The Chip component comes with two built-in sizes.

Chip Set

Chips can be grouped in a Chip Set, that automatically provides the semantics necessary for screen readers to correctly interpret the list of items.

Selectable Chip Set

Chip Sets can be configured so that each of the Chips contained in the set is selectable.

Deletable Chip Set

Chip Sets can be configured so that each of the Chips contained in the set is deletable.

Previous
Carousel
Next
Data Browser