Appearance
The Chip provides predefined appearance options such as different sizes, border radiuses, fill modes and theme colors.
For a live example, visit the Appearance Demo of the Chip.
Options
The Kendo UI Chip supports the following styling options:
-
size
—Configures the overall size of the component. -
themeColor
—Configures what color will be applied to the component. -
fillMode
—Configures how the color is applied to the component. -
rounded
—Configures the border radius of the component.
Size
The size
option controls how big or small the rendered chip
looks. The structure of the class is k-chip-{size}
.
The following values are available for the size
option:
-
sm
—small size -
md
—medium size -
lg
—large size -
none
—unset
The default size value is medium
and it is applied to the rendered div element through the k-chip-md
class.
<div class="k-chip k-chip-md" >
</div>
FillMode
The fillMode
option controls the way the color is applied to the rendered div
. The structure of the class is k-chip-{fillMode}
.
The following values are available for the fillMode
option:
solid
outline
The default fillMode value is solid
and it is applied to the rendered div element through the k-chip-solid
class.
<div class="k-chip k-chip-solid" >
</div>
ThemeColor
The themeColor
option controls the color that will be applied to the rendered Chip. As applying themeColor
is closely related to the fillMode
, the structure of the class name for the themeColor
is composite - k-chip-{fillMode}-{themeColor}
.
The following values are available for the themeColor
option:
base
info
success
warning
error
The default themeColor
value is base
. A Chip with default fillMode
and themeColor
will have k-chip-solid-base
class applied.
<!-- Chip with default fillMode and themeColor -->
<div class="k-chip k-chip-solid k-chip-solid-base" >
</div>
<!-- Chip with `flat` fillMode and `warning` themeColor -->
<div class="k-chip k-chip-flat k-chip-flat-warning" >
</div>
Rounded
The rounded
option controls how much border radius is applied to the rendered Chip. The structure of the class is k-rounded-{size}
.
The following values are available for the rounded
option:
-
sm
—small size -
md
—medium size -
lg
—large size circle
pill
-
none
—unset
The default rounded value is medium
and it is applied to the rendered div element through the k-rounded-md
class.
<div class="k-chip k-rounded-md" >
</div>