New to Kendo UI for Angular? Start a free 30-day trial
Customizing Badge
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-badge-border-width | Number | 1px | 1px |
Description
Border width of the badge. | |||
| $kendo-badge-font-family | Null | $kendo-font-family | null |
Description
Font family of the badge. | |||
| $kendo-badge-font-weight | Null | null | null |
Description
Font weight of the badge. | |||
| $kendo-badge-sm-padding-x | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
Horizontal padding of the badge. | |||
| $kendo-badge-sm-padding-y | Number | k-map-get( $kendo-spacing, 0.5 ) | 0.125rem |
Description
Vertical padding of the badge. | |||
| $kendo-badge-sm-font-size | Number | $kendo-font-size-xs | 0.75rem |
Description
Font sizes of the badge. | |||
| $kendo-badge-sm-line-height | Null | null | null |
Description
Line heights of the badge. | |||
| $kendo-badge-sm-min-width | Calculation | calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) | calc( * 1em + 0.125rem * 2 + 1px * 2) |
Description
Badge min width used for circle badge. | |||
| $kendo-badge-sizes | Map | (
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.125rem, padding-y: 0.125rem, font-size: 0.75rem, line-height: null, min-width: calc( * 1em + 0.125rem * 2 + 1px * 2)), md: (padding-x: 0.25rem, padding-y: 0.25rem, font-size: 0.875rem, line-height: null, min-width: calc( * 1em + 0.25rem * 2 + 1px * 2)), lg: (padding-x: 0.375rem, padding-y: 0.375rem, font-size: 1rem, line-height: null, min-width: calc( * 1em + 0.375rem * 2 + 1px * 2))) |
Description
Size map for the badge. | |||
| $kendo-badge-theme | Map | k-process-variant-matrices(
$kendo-badge-theme-matrix,
$kendo-badge-palette-matrix
) | (solid-neutral: (bg: #ededed, text: #494949, border: #ededed, gradient: null, shadow: null, outline: null), solid-inverse: (bg: #494949, text: #ffffff, border: #494949, gradient: null, shadow: null, outline: null), solid-primary: (bg: #622331, text: #ffffff, border: #622331, gradient: null, shadow: null, outline: null), solid-info: (bg: #0969da, text: #ffffff, border: #0969da, gradient: null, shadow: null, outline: null), solid-success: (bg: #1a7f37, text: #ffffff, border: #1a7f37, gradient: null, shadow: null, outline: null), solid-warning: (bg: #bc4c00, text: #ffffff, border: #bc4c00, gradient: null, shadow: null, outline: null), solid-error: (bg: #cf222e, text: #ffffff, border: #cf222e, gradient: null, shadow: null, outline: null), outline-neutral: (bg: transparent, text: #767676, border: #767676, gradient: null, shadow: null, outline: null), outline-inverse: (bg: transparent, text: #494949, border: #494949, gradient: null, shadow: null, outline: null), outline-primary: (bg: transparent, text: #622331, border: #622331, gradient: null, shadow: null, outline: null), outline-info: (bg: transparent, text: #0969da, border: #0969da, gradient: null, shadow: null, outline: null), outline-success: (bg: transparent, text: #1a7f37, border: #1a7f37, gradient: null, shadow: null, outline: null), outline-warning: (bg: transparent, text: #bc4c00, border: #bc4c00, gradient: null, shadow: null, outline: null), outline-error: (bg: transparent, text: #cf222e, border: #cf222e, gradient: null, shadow: null, outline: null)) |
Description
Theme colors map of the badge. | |||
