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 Мedium
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.Info
ChipThemeColor.Success
ChipThemeColor.Warning
ChipThemeColor.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>