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

Badge

configuration

If set to true a default overlay badge will be displayed. If set to a string, an ovelay with content set to the specified string will be displayed. Can be set to a JavaScript object which represents the configuration of the Badge widget.

badge

Boolean|String|Number|Object

<div style="padding: 10px; background: #cccccc;">
    <button id="button" type="button">Foo</button>
</div>
<script>
    $("#button").kendoButton({
        badge: {
            text: 1234,
            max: 99,
            themeColor: "warning",
            shape: "circle",
            cutoutBorder: true
        }
    });
</script>

badge.align

String

Specifies alignment of the badge relative to button. Valid position options are: top start, top end, bottom start, bottom end.

badge.align works in conjunction with badge.position.

Default: ''

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "5",
      position: "edge",
      align: "top end"
    }
  });
</script>

badge.cutoutBorder

Boolean

Specifies wether or not to render additional "cutout" border around the badge.

Default: false

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "New",
      cutoutBorder: true
    }
  });
</script>

badge.fillMode

String

Sets a value controlling how the color is applied to the badge. When undefined (the default), the theme controls the fill mode. Can also be set to the following string values:

"solid"
"outline"

Default: undefined

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "3",
      fillMode: "outline",
      themeColor: "primary"
    }
  });
</script>

badge.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the badge by a span.k-icon or span.k-svg-icon element.

Default: ''

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      icon: "check",
      themeColor: "success"
    }
  });
</script>

badge.max

Number

If text is a number, it will cap that number.

Default: Infinity

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: 150,
      max: 99
    }
  });
</script>

badge.position

String

Specifies position of the badge relative to the edge of the button. Valid placemnt options are: inline, edge, inside, outside.

Note: position configuration, other than inline, requires the badge to be aligned. See badge.align for more details.

Default: 'edge'

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "8",
      position: "inside",
      align: "bottom end"
    }
  });
</script>

badge.shape

String

Specifies the shape of the badge. Valid options are: rectangle, rounded, pill, circle, dot.

Default: 'rounded'

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "7",
      shape: "circle"
    }
  });
</script>

badge.size

String

Sets a value controlling the size of the badge. When undefined (the default), the theme controls the size. Can also be set to the following string values:

"small"
"medium"
"large"

Default: undefined

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "10",
      size: "large"
    }
  });
</script>

badge.template

String|Function

The template which renders the content of the badge.

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      template: (data) => `${data.value}+`,
      text: 42
    }
  });
</script>

badge.text

String|Number

The text of the badge. Valid input includes string, number or object with toString method. Default is empty string.

Default: ''

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "New",
      themeColor: "info"
    }
  });
</script>

badge.themeColor

String

Specifies the color of the component. Valid options are inherit, default, primary, secondary, tertiary, info, success, warning, error, inverted.

Default: 'secondary'

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: "Alert",
      themeColor: "warning"
    }
  });
</script>

badge.visible

Boolean

If set to false the badge will not be displayed.

Default: true

<button id="button">Button</button>
<script>
  $("#button").kendoButton({
    badge: {
      text: 21,
      visible: false
    }
  });
</script>