Chip Appearance
The Chip provides predefined appearance options such as different sizes, border radiuses, fill modes, and theme colors.
For a live example, refer to the Appearance Demo of the Chip.
The Telerik 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.
@(Html.Kendo().Chip()
.Name("chip")
.Size(ComponentSize.Medium)
.Label("Chip")
)
The Size option accepts the following values:
-
ComponentSize.Small—Small size. - (Default)
ComponentSize.Medium—Medium size. -
ComponentSize.Large—Large size. -
ComponentSize.None—Unset.
The structure of the class is k-chip-{size}. The default size value is Medium and is applied to the rendered div element through the k-chip-md class.
<div class="k-chip k-chip-md" >
</div>
Fill Mode
The FillMode option controls the way the color is applied to the rendered div.
@(Html.Kendo().Chip()
.Name("chip")
.FillMode(ChipFillMode.Solid)
.Label("Chip")
)
The FillMode option accepts the following values:
- (Default)
ChipFillMode.Solid ChipFillMode.Outline
The structure of the Html class is k-chip-{fillMode}. The default fillMode value is Solid and is applied to the rendered div element through the k-chip-solid class.
<div class="k-chip k-chip-solid" >
</div>
Theme Color
The ThemeColor option controls the color that will be applied to the rendered Chip.
@(Html.Kendo().Chip()
.Name("chip")
.ThemeColor(ChipThemeColor.Base)
.Label("Chip")
)
The ThemeColor option accepts the following values:
- (Default)
ChipThemeColor.Base ChipThemeColor.InfoChipThemeColor.SuccessChipThemeColor.WarningChipThemeColor.Error
The default ThemeColor value is base. A Chip with default FillMode and ThemeColor settings will have the k-chip-solid-base class applied.
<!-- A Chip with default fillMode and themeColor settings -->
<div class="k-chip k-chip-solid k-chip-solid-base" >
</div>
Border Radius
The Rounded option controls how much border radius is applied to the rendered Chip.
@(Html.Kendo().Chip()
.Name("chip")
.Rounded(Rounded.Medium)
.Label("Chip")
)
The Rounded option accepts the following values:
-
Rounded.Small—Small form. - (Default)
Rounded.Medium—Medium form. -
Rounded.Large—Large form. -
Rounded.None—Unset.
The structure of the class is k-rounded-{size}. The default rounded value is medium and is applied to the rendered div element through the k-rounded-md class.
<div class="k-chip k-rounded-md" >
</div>