New to Kendo UI for Angular? Start a free 30-day trial

Customizing Chip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber

1px

1px

Description
Width of the border around the button.
$kendo-chip-spacingNumber

map-get( $spacing, 1 )

4px

Description
The spacing between the text and the icons of the chip.
$kendo-chip-padding-xNumber

map-get( $spacing, 1 )

4px

Description
Horizontal padding of the chip.
$kendo-chip-padding-yNumber

map-get( $spacing, 1 )

4px

Description
Vertical padding of the chip.
$kendo-chip-font-sizeNumber

$font-size-md

14px

Description
Font sizes of the chip.
$kendo-chip-line-heightNumber

(18 / 14)

1.2857142857

Description
Line heights of the chip that are connected to the $font-size.
$kendo-chip-sizesMap

( sm: ( padding-x: $kendo-chip-padding-x-sm, padding-y: $kendo-chip-padding-y-sm, font-size: $kendo-chip-font-size-sm, line-height: $kendo-chip-line-height-sm ), md: ( padding-x: $kendo-chip-padding-x-md, padding-y: $kendo-chip-padding-y-md, font-size: $kendo-chip-font-size-md, line-height: $kendo-chip-line-height-md ), lg: ( padding-x: $kendo-chip-padding-x-lg, padding-y: $kendo-chip-padding-y-lg, font-size: $kendo-chip-font-size-lg, line-height: $kendo-chip-line-height-lg ) )

(sm: (padding-x: 4px, padding-y: 2px, font-size: 14px, line-height: 1.2857142857), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1.2857142857), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1.2857142857))

Description
Sizes map for the chip.
$kendo-chip-base-bgColor

$base-text

rgba(0, 0, 0, 0.87)

Description
The base background of the chip.
$kendo-chip-theme-colorsMap

( "base": $kendo-chip-base-bg, "error": map-get( $kendo-theme-colors, "error" ), "info": map-get( $kendo-theme-colors, "info" ), "warning": map-get( $kendo-theme-colors, "warning" ), "success": map-get( $kendo-theme-colors, "success" ) )

("base": rgba(0, 0, 0, 0.87), "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)

Description
Theme colors map for the chip.
$kendo-chip-solid-bgColor

try-tint( $kendo-chip-base-bg, 90% )

rgba(235, 235, 235, 0.987)

Description
The base background color of solid chip.
$kendo-chip-solid-textColor

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

Description
The base text color of solid chip.
$kendo-chip-solid-borderColor

try-tint( $kendo-chip-base-bg, 70% )

rgba(192, 192, 192, 0.961)

Description
The base border color of solid chip.
$kendo-chip-solid-shadowNull

null

null

Description
The base shadow of solid chip.
$kendo-chip-solid-focus-bgColor

try-tint( $kendo-chip-base-bg, 92% )

rgba(239, 239, 239, 0.9896)

Description
The base background color of focused solid chip.
$kendo-chip-solid-focus-textNull

null

null

Description
The base text color of focused solid chip.
$kendo-chip-solid-hover-bgColor

try-tint( $kendo-chip-base-bg, 84% )

rgba(222, 222, 222, 0.9792)

Description
The base background color of hovered solid chip.
$kendo-chip-solid-hover-textNull

null

null

Description
The base text color of hovered solid chip.
$kendo-chip-solid-selected-bgColor

try-tint( $kendo-chip-base-bg, 76% )

rgba(205, 205, 205, 0.9688)

Description
The base background color of selected solid chip.
$kendo-chip-solid-selected-textNull

null

null

Description
The base text color of selected solid chip.
$kendo-chip-outline-bgColor

$component-bg

white

Description
The base background color of outline chip.
$kendo-chip-outline-textColor

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

Description
The base text color of outline chip.
$kendo-chip-outline-borderColor

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

Description
The base border color of outline chip.
$kendo-chip-outline-shadowNull

null

null

Description
The base shadow of outline chip.
$kendo-chip-outline-hover-bgColor

$kendo-chip-base-bg

rgba(0, 0, 0, 0.87)

Description
The base background color of hovered outline chip.
$kendo-chip-outline-hover-textColor

contrast-wcag( $kendo-chip-base-bg )

white

Description
The base text color of hovered outline chip.
$kendo-chip-outline-selected-bgColor

$kendo-chip-outline-hover-bg

rgba(0, 0, 0, 0.87)

Description
The base background color of selected outline chip.
$kendo-chip-outline-selected-textColor

$kendo-chip-outline-hover-text

white

Description
The base text color of selected outline chip.
$kendo-chip-list-sizesMap

( sm: map-get( $spacing, 1 ), md: map-get( $spacing, 1 ), lg: map-get( $spacing, 1 ) )

(sm: 4px, md: 4px, lg: 4px)

Description
The sizes of the chip list.

In this article

Not finding the help you need?