New to Telerik UI for ASP.NET Core? Download free 30-day trial

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")
    )
    @addTagHelper *, Kendo.Mvc

    <kendo-chip name="chip"
                size="ComponentSize.Medium"
                label="Chip">
    </kendo-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")
    )
    @addTagHelper *, Kendo.Mvc

    <kendo-chip name="chip"
                fill-mode="ChipFillMode.Solid"
                label="Chip">
    </kendo-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")
    )
    @addTagHelper *, Kendo.Mvc

    <kendo-chip name="chip"
                theme-color="ChipThemeColor.Base"
                label="Chip">
    </kendo-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")
    )
    @addTagHelper *, Kendo.Mvc

    <kendo-chip name="chip"
                rounded="Rounded.Medium"
                label="Chip">
    </kendo-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>

See Also

In this article