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-spacingStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The spacing between the text and the icons of the Chip.
$kendo-chip-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the Chip.
$kendo-chip-avatar-widthNumber1em1em
Description
The width of the Chip' avatar.
$kendo-chip-avatar-heightNumber1em1em
Description
The height of the Chip' avatar.
$kendo-chip-avatar-flex-basisNumber1em1em
Description
The flex basis of the Chip' avatar.
$kendo-chip-disabled-textStringvar( --kendo-disabled-text, inherit )var(--kendo-disabled-text, inherit)
Description
The text color of the disabled Chip.
$kendo-chip-solid-disabled-bgStringvar( --kendo-disabled-bg, transparent )var(--kendo-disabled-bg, transparent)
Description
The background color of the solid disabled Chip.
$kendo-chip-solid-disabled-borderStringvar( --kendo-disabled-border, inherit )var(--kendo-disabled-border, inherit)
Description
The border color of the solid disabled Chip.
$kendo-chip-outline-disabled-bgStringvar( $kendo-component-bg, transparent )var(var(--kendo-color-surface-alt, #ffffff), transparent)
Description
The background color of the outline disabled Chip.
$kendo-chip-outline-disabled-borderStringif($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 ))color-mix(in srgb, var(--kendo-color-on-app-surface, #323130) 46%, transparent)
Description
The border color of the outline disabled Chip.
$kendo-chip-focus-offsetStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The offset of the outline focused Chip.
$kendo-chip-focus-outline-widthNumber1px1px
Description
The outline width of the outline focused Chip.
$kendo-chip-focus-outline-styleStringsolidsolid
Description
The outline style of the outline focused Chip.
$kendo-chip-sm-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the small Chip.
$kendo-chip-md-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium Chip.
$kendo-chip-lg-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the large Chip.
$kendo-chip-sm-padding-yStringk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)
Description
The vertical padding of the small Chip.
$kendo-chip-md-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the medium Chip.
$kendo-chip-lg-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the large Chip.
$kendo-chip-sm-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the small Chip.
$kendo-chip-md-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the medium Chip.
$kendo-chip-lg-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the large Chip.
$kendo-chip-sm-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The small Chip's line height that is related to the $kendo-font-size.
$kendo-chip-md-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The medium Chip's line height that is related to the $kendo-font-size.
$kendo-chip-lg-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The large Chip's line height that is related to the $kendo-font-size.
$kendo-chip-calc-sizeCalculationcalc( #{$kendo-chip-md-line-height} * 1em + #{$kendo-chip-md-padding-y} * 2 + #{$kendo-chip-border-width} * 2 )calc(var(--kendo-line-height, normal) * 1em + var(--kendo-spacing-1, 0.25rem) * 2 + 1px * 2)
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":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-0\\.5, 0.125rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)"
  • md: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-1, 0.25rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)"
  • lg: "padding-x":"var(--kendo-spacing-2, 0.5rem)","padding-y":"var(--kendo-spacing-1\\.5, 0.375rem)","font-size":"var(--kendo-font-size, inherit)","line-height":"var(--kendo-line-height, normal)"
Description
The map with the sizes of the Chip.
$kendo-chip-list-sizesMap( sm: k-spacing(1), md: k-spacing(1), lg: k-spacing(1) )
  • sm: var(--kendo-spacing-1, 0.25rem)
  • md: var(--kendo-spacing-1, 0.25rem)
  • lg: var(--kendo-spacing-1, 0.25rem)
Description
The sizes of the Chip list.

In this article

Not finding the help you need?