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

1

1

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), md: (padding-x: 4px, padding-y: 4px, font-size: 14px, line-height: 1), lg: (padding-x: 4px, padding-y: 6px, font-size: 14px, line-height: 1))

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

$base-text

#424242

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": #424242, "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, 92% )

#f0f0f0

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

$kendo-chip-base-bg

#424242

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

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

#c6c6c6

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

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba(66, 66, 66, 0.16)

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

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

#f0f0f0

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% )

#e1e1e1

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% )

#d2d2d2

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

#ffffff

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

$kendo-chip-base-bg

#424242

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

$kendo-chip-base-bg

#424242

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

0 0 0 2px rgba( $kendo-chip-base-bg, .16 )

0 0 0 2px rgba(66, 66, 66, 0.16)

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

$kendo-chip-base-bg

#424242

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

#424242

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?