New to Kendo UI for Vue? Start a free 30-day trial

Appearance

The Chip provides a predefined set of appearance options.

Apart from the default vision of the Chip, these alternative styling options enable you to configure each individual aspect of the component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

• Chip Configurator demo
• Chip Sizes
• Chip Roundness
• Chip Fill Mode
• Chip Theme Colors

Configurator demo

With the following example, you can dynamically change the different appearance properties of the Chip and see how it changes.

Size

The size of the Chip is controlled through its size property. The values we can pass to the property are as follows:

• small — Sets the padding to 3px.
• medium(Default) — Sets the padding to 4px.
• large — Sets the padding to 5px.
• null — Passing null to the size property gives us the option to define a custom CSS class that sets the padding of the Chip.

The following example demonstrates the usage of each size option:

Roundness

The roundness of the Chip is controlled through its rounded property. The values we can pass to the property are as follows:

• small — Sets the border radius to 1px.
• medium(Default) — Sets the border radius to 2px.

• large — Sets the border radius to 4px.

• full — Sets the border radius to 9999px.
• null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the Chip.

The following example demonstrates the usage of each rounded option:

Fill Mode

The styling of the Chip is controlled through its fillMode property. The values we can pass to the property are as follows:

• solid (Default) — Sets a background color and solid borders.
• outline — Sets a transparent background and solid borders.
• null — Passing null to the fillMode property gives us the option to define a custom CSS class that defines the background and border of the Chip.

The following example demonstrates the usage of each fillMode option:

Theme Colors

The color of the Chip is controlled through its themeColor property.

• base (Default) — The color of the Chip will be based on the base theme color.
• info — The color of the Chip will be based on the info theme color.
• success — The color of the Chip will be based on the success theme color.
• warning — The color of the Chip will be based on the warning theme color.
• error — The color of the Chip will be based on the error theme color.
• null — Passing null to the themeColor property gives us the option to define a custom CSS class that sets the look of the Chip.

The following example demonstrates the usage of each themeColor option:

Suggested Links

• API Reference of the Chip
• Chip size options
• Chip rounded options
• Chip fillMode options
• Chip themeColor options
• Creating Custom Styles with ThemeBuilder