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

$badge-border-radius

0.375rem

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

$badge-padding-x

0.65em

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

$badge-padding-y

0.35em

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

$badge-font-size

0.75em

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

1

1

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

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

calc( 1em + 0.7em + 2px)

Description
Badge min width used for circle 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: 0.325em, padding-y: 0.175em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.35em + 2px )), md: (padding-x: 0.65em, padding-y: 0.35em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 0.7em + 2px )), lg: (padding-x: 0.975em, padding-y: 0.525em, font-size: 0.75em, line-height: 1, min-width: calc( 1em + 1.05em + 2px )))

Description
Sizes map for the badge.

In this article

Not finding the help you need?