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

Customizing Badge

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber1px1px
Description
The width of the border around the Badge.
$kendo-badge-border-radiusNumber$kendo-border-radius-md4px
Description
The border radius of the Badge.
$kendo-badge-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the Badge.
$kendo-badge-sm-padding-xNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The horizontal padding of the small Badge.
$kendo-badge-md-padding-xNumberk-map-get( $kendo-spacing, 1 )4px
Description
The horizontal padding of the medium Badge.
$kendo-badge-lg-padding-xNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The horizontal padding of the large Badge.
$kendo-badge-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the Badge.
$kendo-badge-sm-padding-yNumberk-map-get( $kendo-spacing, 0.5 )2px
Description
The vertical padding of the small Badge.
$kendo-badge-md-padding-yNumberk-map-get( $kendo-spacing, 1 )4px
Description
The vertical padding of the medium Badge.
$kendo-badge-lg-padding-yNumberk-map-get( $kendo-spacing, 1.5 )6px
Description
The vertical padding of the large Badge.
$kendo-badge-font-sizeNumber$kendo-font-size-xs10px
Description
The font sizes of the Badge.
$kendo-badge-sm-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the small Badge.
$kendo-badge-md-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the medium Badge.
$kendo-badge-lg-font-sizeNumber$kendo-font-size-xs10px
Description
The font size of the large Badge.
$kendo-badge-line-heightNumber11
Description
The line heights used along with the $kendo-font-size variable.
$kendo-badge-sm-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the small Badge.
$kendo-badge-md-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the medium Badge.
$kendo-badge-lg-line-heightNumber$kendo-badge-line-height1
Description
The line height used along with the $kendo-font-size variable of the large Badge.
$kendo-badge-min-widthCalculationcalc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})calc(1em + 8px + 2px)
Description
The calculated minimum width of the circular Badge.
$kendo-badge-sm-min-widthCalculationcalc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc(1em + 4px + 2px)
Description
The calculated minimum width of the small circular Badge.
$kendo-badge-md-min-widthCalculationcalc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc(1em + 8px + 2px)
Description
The calculated minimum width of the medium circular Badge.
$kendo-badge-lg-min-widthCalculationcalc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} )calc(1em + 12px + 2px)
Description
The calculated minimum width of the large circular Badge.
$kendo-badge-sizesMap( sm: ( padding-x: $kendo-badge-sm-padding-x, padding-y: $kendo-badge-sm-padding-y, font-size: $kendo-badge-sm-font-size, line-height: $kendo-badge-sm-line-height, min-width: $kendo-badge-sm-min-width ), md: ( padding-x: $kendo-badge-md-padding-x, padding-y: $kendo-badge-md-padding-y, font-size: $kendo-badge-md-font-size, line-height: $kendo-badge-md-line-height, min-width: $kendo-badge-md-min-width ), lg: ( padding-x: $kendo-badge-lg-padding-x, padding-y: $kendo-badge-lg-padding-y, font-size: $kendo-badge-lg-font-size, line-height: $kendo-badge-lg-line-height, min-width: $kendo-badge-lg-min-width ) )(sm: (padding-x: 2px, padding-y: 2px, font-size: 10px, line-height: 1, min-width: calc(1em + 4px + 2px)), md: (padding-x: 4px, padding-y: 4px, font-size: 10px, line-height: 1, min-width: calc(1em + 8px + 2px)), lg: (padding-x: 6px, padding-y: 6px, font-size: 10px, line-height: 1, min-width: calc(1em + 12px + 2px)))
Description
The sizes map for the Badge.

In this article

Not finding the help you need?