# 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:

* [Size](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/appearance#size)
* [Roundness](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/appearance#chip-roundness)
* [Fill Mode](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/appearance#chip-fill-mode)
* [Theme Color](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chiplist/appearance#chip-theme-color)

The following example demonstrates all the available appearance options of the ChipList in a single, configurable demo.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chiplist/appearance/appearance-options/source.txt)

> Starting with [version 22.1.0](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui#v22.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](https://www.telerik.com/design-system).

## Size

The Kendo UI for Angular ChipList enables you to configure the gap between its Chips by using the [`size`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent#size) property, which accepts [`ChipSize`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipsize) values. The ChipList applies that size to Chips without an explicit value. A Chip with its own [`size`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#size) keeps that value.

The [`size`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent#size) option supports the following values:

* `small`
* `medium`
* `large`

The following example demonstrates how to define the size of the ChipList and compare the available gap sizes.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chiplist/size/source.txt)

## Chip Roundness

The ChipList lets you apply different roundness to its Chips through the [`rounded`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#rounded) property of each Chip, which accepts [`ChipRounded`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiprounded) values.

The [`rounded`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#rounded) option supports the following values:

* `small`
* `medium`
* `large`
* `full`
* `none`

The following example demonstrates how to define the border radius of the Chips in a ChipList.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chiplist/appearance/rounded/source.txt)

## Chip Fill Mode

The ChipList allows you to set different fill modes for its Chips by using the [`fillMode`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#fillMode) property of each Chip, which accepts [`ChipFillMode`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipfillmode) values.

The [`fillMode`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#fillMode) option supports the following values:

* `solid`
* `outline`

The following example demonstrates how to define the fill mode of the Chips in a ChipList.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chiplist/appearance/fillmode/source.txt)

## Chip Theme Color

The ChipList allows you to set different theme colors for its Chips with the [`themeColor`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#themeColor) property of each Chip, which accepts [`ChipThemeColor`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipthemecolor) values.

The [`themeColor`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#themeColor) option supports the following values:

* `base`
* `info`
* `success`
* `warning`
* `error`

The following example demonstrates how to define the theme color of the Chips in a ChipList.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chiplist/appearance/themecolor/source.txt)

## Suggested Links

* [API Reference of the ChipList](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chiplistcomponent)
* [Chip Appearance](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/appearance)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-builder)