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

Customizing Badge

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-badge-border-widthNumber

1px

1px

Description
Width of the border around the badge.
$kendo-badge-border-radiusNumber

$kendo-border-radius-md

4px

Description
Border radius of the badge.
$kendo-badge-padding-xNumber

k-map-get( $spacing, 1 )

4px

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

k-map-get( $spacing, 1 )

4px

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

$font-size-xs

10px

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

1

1

Description
Line heights used along with $font-size.
$kendo-badge-min-widthCalculation

calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2})

calc( 1em + 8px + 2px)

Description
Badge min width used for circle badge.
$kendo-badge-sizesMap

( sm: ( padding-x: $kendo-badge-padding-x-sm, padding-y: $kendo-badge-padding-y-sm, font-size: $kendo-badge-font-size-sm, line-height: $kendo-badge-line-height-sm, min-width: $kendo-badge-min-width-sm ), md: ( padding-x: $kendo-badge-padding-x-md, padding-y: $kendo-badge-padding-y-md, font-size: $kendo-badge-font-size-md, line-height: $kendo-badge-line-height-md, min-width: $kendo-badge-min-width-md ), lg: ( padding-x: $kendo-badge-padding-x-lg, padding-y: $kendo-badge-padding-y-lg, font-size: $kendo-badge-font-size-lg, line-height: $kendo-badge-line-height-lg, min-width: $kendo-badge-min-width-lg ) )

(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
Sizes map for the badge.

In this article

Not finding the help you need?