Customizing Chip

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-chip-border-width	Number	`1px`	`1px`
Description Width of the border around the button.
$kendo-chip-spacing	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description The spacing between the text and the icons of the chip.
$kendo-chip-padding-x	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description Horizontal padding of the chip.
$kendo-chip-padding-y	Number	`k-map-get( $kendo-spacing, 1 )`	`0.25rem`
Description Vertical padding of the chip.
$kendo-chip-font-size	Number	`$kendo-font-size-md`	`1rem`
Description Font sizes of the chip.
$kendo-chip-line-height	Number	`1.25`	`1.25`
Description Line heights of the chip that are connected to the $kendo-font-size.
$kendo-chip-calc-size	Calculation	`calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} )`	`calc( 1.25em + 0.5rem + 2px )`
Description Calculated height of the chip.
$kendo-chip-sizes	Map	`( 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: 0.25rem, padding-y: 0.125rem, font-size: 0.875rem, line-height: 1.25), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 1rem, line-height: 1.25), lg: (padding-x: 0.25rem, padding-y: 0.375rem, font-size: 1rem, line-height: 1.25))`
Description Sizes map for the chip.
$kendo-chip-base-bg	Color	`$kendo-button-bg`	`#e4e7eb`
Description The base background color of the chip.
$kendo-chip-theme-colors	Map	`( "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": #e4e7eb, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)`
Description Theme colors map for the chip.
$kendo-chip-solid-bg	Color	`$kendo-chip-base-bg`	`#e4e7eb`
Description The base background color of solid chip.
$kendo-chip-solid-text	Color	`$kendo-button-text`	`#212529`
Description The base text color of solid chip.
$kendo-chip-solid-border	Color	`$kendo-button-border`	`#e4e7eb`
Description The base border color of solid chip.
$kendo-chip-solid-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(228, 231, 235, 0.16)`
Description The base shadow of solid chip.
$kendo-chip-solid-gradient	Null	`$kendo-button-gradient`	`null`
Description The base gradient of solid chip.
$kendo-chip-solid-focus-bg	Null	`null`	`null`
Description The base background color of focused solid chip.
$kendo-chip-solid-focus-text	Null	`null`	`null`
Description The base text color of focused solid chip.
$kendo-chip-solid-hover-bg	Color	`$kendo-button-hover-bg`	`#ced3db`
Description The base background color of hovered solid chip.
$kendo-chip-solid-hover-text	Null	`null`	`null`
Description The base text color of hovered solid chip.
$kendo-chip-solid-selected-bg	Color	`$kendo-button-active-bg`	`#c7cdd5`
Description The base background color of selected solid chip.
$kendo-chip-solid-selected-text	Null	`null`	`null`
Description The base text color of selected solid chip.
$kendo-chip-outline-bg	Color	`$kendo-component-bg`	`#ffffff`
Description The base background color of outline chip.
$kendo-chip-outline-text	Color	`$kendo-chip-solid-text`	`#212529`
Description The base text color of outline chip.
$kendo-chip-outline-border	Color	`$kendo-chip-outline-text`	`#212529`
Description The base border color of outline chip.
$kendo-chip-outline-shadow	List	`0 0 0 2px rgba( $kendo-chip-base-bg, .16 )`	`0 0 0 2px rgba(228, 231, 235, 0.16)`
Description The base shadow of outline chip.
$kendo-chip-outline-hover-bg	Color	`$kendo-chip-outline-text`	`#212529`
Description The base background color of hovered outline chip.
$kendo-chip-outline-hover-text	Color	`k-contrast-color( $kendo-chip-outline-hover-bg )`	`white`
Description The base text color of hovered outline chip.
$kendo-chip-outline-selected-bg	Color	`$kendo-chip-outline-hover-bg`	`#212529`
Description The base background color of selected outline chip.
$kendo-chip-outline-selected-text	Color	`$kendo-chip-outline-hover-text`	`white`
Description The base text color of selected outline chip.
$kendo-chip-list-sizes	Map	`( sm: k-map-get( $kendo-spacing, 1 ), md: k-map-get( $kendo-spacing, 1 ), lg: k-map-get( $kendo-spacing, 1 ) )`	`(sm: 0.25rem, md: 0.25rem, lg: 0.25rem)`
Description The sizes of the chip list.

Customizing Chip

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Customizing Chip

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!