New to Kendo UI for Vue? 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 )

0.25rem

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

map-get( $spacing, 1 )

0.25rem

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

map-get( $spacing, 1 )

0.25rem

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

$font-size-md

1rem

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

1.25

1.25

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: 0.25rem, padding-y: 0.125rem, font-size: 1rem, 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-bgColor

$base-text

#212529

Description
The base background color 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": #212529, "error": #dc3545, "info": #0dcaf0, "warning": #ffc107, "success": #198754)

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

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

#edeeee

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

$kendo-chip-base-bg

#212529

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

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

#bcbebf

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(33, 37, 41, 0.16)

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

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

#edeeee

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

#dbdcdd

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

#cacbcc

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

#212529

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

$kendo-chip-base-bg

#212529

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(33, 37, 41, 0.16)

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

$kendo-chip-base-bg

#212529

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

#212529

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: 0.25rem, md: 0.25rem, lg: 0.25rem)

Description
The sizes of the chip list.

In this article

Not finding the help you need?