ChipList Appearance
The ChipList lets you set the gap between its Chips and apply a common size to Chips without an explicit size. To set the roundness, fill mode, and theme color, configure the individual Chips in the ChipList.
Apart from the default vision of the ChipList, these alternative styling options enable you to configure each individual aspect of the appearance of a ChipList.
Use these links to go directly to each appearance option:
The following example demonstrates all the available appearance options of the ChipList in a single, configurable demo.
Starting with version 22.1.0, default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
For more information, refer to the Design System documentation.
Size
The Kendo UI for Angular ChipList enables you to configure the gap between its Chips by using the size property, which accepts ChipSize values. The ChipList applies that size to Chips without an explicit value. A Chip with its own size keeps that value.
The size option supports the following values:
smallmediumlarge
The following example demonstrates how to define the size of the ChipList and compare the available gap sizes.
Chip Roundness
The ChipList lets you apply different roundness to its Chips through the rounded property of each Chip, which accepts ChipRounded values.
The rounded option supports the following values:
smallmediumlargefullnone
The following example demonstrates how to define the border radius of the Chips in a ChipList.
Chip Fill Mode
The ChipList allows you to set different fill modes for its Chips by using the fillMode property of each Chip, which accepts ChipFillMode values.
The fillMode option supports the following values:
solidoutline
The following example demonstrates how to define the fill mode of the Chips in a ChipList.
Chip Theme Color
The ChipList allows you to set different theme colors for its Chips with the themeColor property of each Chip, which accepts ChipThemeColor values.
The themeColor option supports the following values:
baseinfosuccesswarningerror
The following example demonstrates how to define the theme color of the Chips in a ChipList.