# ChipList Appearance

The ChipList provides a [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#size) option that applies to all of its Chips. To set the roundness, fill mode, and theme color, pass a custom Chip through the [`chip`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#chip) property.

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.

* [Size](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/appearance#size)
* [Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/appearance#chip-roundness)
* [Fill Mode](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/appearance#chip-fill-mode)
* [Theme Color](https://www.telerik.com/kendo-vue-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-vue-ui/buttons/chiplist/appearance/configurator/source.txt)

## Size

The Kendo UI for Vue ChipList enables you to configure the size of its Chips by using the [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#size) property.

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

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

If you omit the property, the active Kendo theme controls the default appearance.

The following example demonstrates how to define the size of the ChipList.

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

## Chip Roundness

The ChipList lets you apply different roundness to its Chips through the [`rounded`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#rounded) property of the custom Chip.

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

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

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/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-vue-ui-develop/components/buttons/api/chipprops#fillMode) property of the Chip.

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

* `solid`
* `outline`

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

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/appearance/fill-mode/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-vue-ui-develop/components/buttons/api/chipprops#themeColor) property of the custom Chip.

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

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

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

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

## Suggested Links

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