themeColorString(default: undefined)

Specifies the theme color of the component. If undefined (the default), the theme controls the default color.

Valid options are

  • base: apply coloring based on surface theme color.
  • primary: apply coloring based on primary theme color.
  • secondary: apply coloring based on secondary theme color.
  • tertiary: apply coloring based on tertiary theme color.
  • info: apply coloring based on info theme color.
  • success: apply coloring based on success theme color.
  • warning:apply coloring based on warning theme color.
  • error: apply coloring based on error theme color.

Example

<span id="badge-base">Base</span>
<span id="badge-primary">Primary</span>
<span id="badge-secondary">Secondary</span>
<span id="badge-tertiary">Tertiary</span>
<span id="badge-info">Info</span>
<span id="badge-success">Success</span>
<span id="badge-warning">Warning</span>
<span id="badge-error">Error</span>

<script>
    $('#badge-base').kendoBadge({ themeColor: 'base' });
    $('#badge-primary').kendoBadge({ themeColor: 'primary' });
    $('#badge-secondary').kendoBadge({ themeColor: 'secondary' });
    $('#badge-tertiary').kendoBadge({ themeColor: 'tertiary' });
    $('#badge-info').kendoBadge({ themeColor: 'info' });
    $('#badge-success').kendoBadge({ themeColor: 'success' });
    $('#badge-warning').kendoBadge({ themeColor: 'warning' });
    $('#badge-error').kendoBadge({ themeColor: 'error' });
</script>
In this article
themeColor
Not finding the help you need?
Contact Support