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:
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 thepaddingto3px.medium— Sets thepaddingto4px.large— Sets thepaddingto5px.
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:
none— Sets noborder radius.small— Sets theborder radiusto1px.medium— Sets theborder radiusto2px.large— Sets theborder radiusto4px.full— Sets theborder radiusto9999px.
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— Sets abackgroundcolor andsolid borders.outline— Sets atransparent backgroundandsolid borders.
The following example demonstrates the usage of each fillMode option:
Theme Colors
The color of the Chip is controlled through its themeColor property.
base— The color of the Chip will be based on thebasetheme color.info— The color of the Chip will be based on theinfotheme color.success— The color of the Chip will be based on thesuccesstheme color.warning— The color of the Chip will be based on thewarningtheme color.error— The color of the Chip will be based on theerrortheme color.
The following example demonstrates the usage of each themeColor option: