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 thepadding
to3px
.medium
(Default) — Sets thepadding
to4px
.large
— Sets thepadding
to5px
.null
— Passingnull
to thesize
property gives us the option to define acustom CSS class
that sets thepadding
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 theborder radius
to1px
.medium
(Default) — Sets theborder radius
to2px
.
large
— Sets theborder radius
to4px
.
full
— Sets theborder radius
to9999px
.null
— Passingnull
to therounded
property gives us the option to define acustom CSS class
that defines theborder-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 abackground
color andsolid borders
.outline
— Sets atransparent background
andsolid borders
.null
— Passingnull
to thefillMode
property gives us the option to define acustom CSS class
that defines thebackground
andborder
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 thebase
theme color.info
— The color of the Chip will be based on theinfo
theme color.success
— The color of the Chip will be based on thesuccess
theme color.warning
— The color of the Chip will be based on thewarning
theme color.error
— The color of the Chip will be based on theerror
theme color.null
— Passingnull
to thethemeColor
property gives us the option to define acustom CSS class
that sets the look of the Chip.
The following example demonstrates the usage of each themeColor
option: