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

Customizing Chip

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-chip-border-widthNumber1px1px
Description
The width of the border around the Chip.
$kendo-chip-spacingNumberk-map-get( $kendo-spacing, 1 )4px
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the Chip.
$kendo-chip-sm-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xNumber$kendo-chip-padding-x4px
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the large Chip.
$kendo-chip-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Chip.
$kendo-chip-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-yNumber$kendo-chip-padding-y4px
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the large Chip.
$kendo-chip-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the Chip.
$kendo-chip-sm-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the small Chip.
$kendo-chip-md-font-sizeNumber$kendo-chip-font-size14px
Description
The font size of the medium Chip.
$kendo-chip-lg-font-sizeNumber$kendo-font-size-md14px
Description
The font size of the large Chip.
$kendo-chip-line-heightNumber11
Description
The Chip's line height that is related to the $kendo-font-size.
$kendo-chip-sm-line-heightNumber$kendo-chip-line-height1
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightNumber$kendo-chip-line-height1
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightNumber$kendo-chip-line-height1
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )calc(1em + 8px + 2px)
Description
The calculated height of the Chip.
$kendo-chip-sizesMap( sm: ( padding-x: $kendo-chip-sm-padding-x, padding-y: $kendo-chip-sm-padding-y, font-size: $kendo-chip-sm-font-size, line-height: $kendo-chip-sm-line-height ), md: ( padding-x: $kendo-chip-md-padding-x, padding-y: $kendo-chip-md-padding-y, font-size: $kendo-chip-md-font-size, line-height: $kendo-chip-md-line-height ), lg: ( padding-x: $kendo-chip-lg-padding-x, padding-y: $kendo-chip-lg-padding-y, font-size: $kendo-chip-lg-font-size, line-height: $kendo-chip-lg-line-height ) )(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
The map with the sizes of the Chip.
$kendo-chip-base-bgColorif($kendo-enable-color-system, k-color( base-subtle ), $kendo-button-bg)#f5f5f5
Description
The base background of the Chip.
$kendo-chip-theme-colorsMap( "base": $kendo-chip-base-bg, "error": k-map-get($kendo-theme-colors, "error"), "info": k-map-get($kendo-theme-colors, "info"), "warning": k-map-get($kendo-theme-colors, "warning"), "success": k-map-get($kendo-theme-colors, "success") )("base": #f5f5f5, "error": #f31700, "info": #0058e9, "warning": #ffc000, "success": #37b400)
Description
The theme colors map for the Chip.
$kendo-chip-solid-bgColor$kendo-chip-base-bg#f5f5f5
Description
The base background color of the solid Chip.
$kendo-chip-solid-textColor$kendo-button-text#424242
Description
The base text color of the solid Chip.
$kendo-chip-solid-borderColor$kendo-button-borderrgba(0, 0, 0, 0.08)
Description
The base border color of the solid Chip.
$kendo-chip-solid-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the solid Chip.
$kendo-chip-solid-gradientList$kendo-button-gradientrgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)
Description
The base gradient of the solid Chip.
$kendo-chip-solid-focus-bgNullnullnull
Description
The base background color of the focused solid Chip.
$kendo-chip-solid-focus-textNullnullnull
Description
The base text color of the focused solid Chip.
$kendo-chip-solid-hover-bgColorif($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-button-hover-bg)#ebebeb
Description
The base background color of the hovered solid Chip.
$kendo-chip-solid-hover-textNullnullnull
Description
The base text color of the hovered solid Chip.
$kendo-chip-solid-selected-bgColor$kendo-button-active-bg#d8d8d8
Description
The base background color of the selected solid Chip.
$kendo-chip-solid-selected-textNullnullnull
Description
The base text color of the selected solid Chip.
$kendo-chip-outline-bgColor$kendo-component-bg#ffffff
Description
The base background color of the outline Chip.
$kendo-chip-outline-textColor$kendo-chip-solid-text#424242
Description
The base text color of the outline Chip.
$kendo-chip-outline-borderColor$kendo-chip-outline-text#424242
Description
The base border color of the outline Chip.
$kendo-chip-outline-shadowList0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) ))0 0 0 2px rgba(0, 0, 0, 0.08)
Description
The base shadow of the outline Chip.
$kendo-chip-outline-hover-bgColor$kendo-chip-outline-text#424242
Description
The base background color of the hovered outline Chip.
$kendo-chip-outline-hover-textColorif($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-chip-outline-hover-bg ))white
Description
The base text color of the hovered outline Chip.
$kendo-chip-outline-selected-bgColor$kendo-chip-outline-hover-bg#424242
Description
The base background color of the selected outline Chip.
$kendo-chip-outline-selected-textColor$kendo-chip-outline-hover-textwhite
Description
The base text color of the selected outline Chip.
$kendo-chip-list-sizesMap( sm: k-map-get( $kendo-spacing, 1 ), md: k-map-get( $kendo-spacing, 1 ), lg: k-map-get( $kendo-spacing, 1 ) )(sm: 4px, md: 4px, lg: 4px)
Description
The sizes of the Chip list.

In this article

Not finding the help you need?