Kendo UI for Vue Badge Overview

The Badge component is a visual indicator for UI elements. It enables you to easily show statuses, notifications, and short messages in your app. Badges provide additional contextual information for other elements on the page.

The Kendo UI for Vue Badge is distributed through the kendo-vue-indicators NPM package.

The Badge Component is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

A Badge in the Kendo UI for Vue Native suite can be defined using two approaches:

  • The Badge component
  • The BadgeContainer component

Both approaches are valid and can be used based on your personal preference or the complexity of the scenario you are working on.

Using the Kendo UI for Vue Badge component

To use the Native Badge component, we have to add it after the DOM element to which we want it to be attached to. Two two DOM elements - the Badge and the target element - should be wrapped in a parent div or span element as in the following definition:

<span class="badge">
  <span class="k-icon k-i-vimeo-box social" />
  <Badge>77 </Badge>
</span>

The badge class in the above snippet is defined as follows to position the Badge component correctly.

.badge {
  position: relative;
  overflow: visible;
}

Using the Kendo UI for Vue BadgeContainer component

The BadgeContainer uses a Slot template to define its content. Using this approach the configurations of the Badge are passed directly to the BadgeContainer.

<BadgeContainer
  :content="'content'"
  :align="{
    vertical: 'bottom',
    horizontal: 'end',
  }"
  :theme-color="'dark'"
>
  <span class="k-icon k-i-files" />
  <template v-slot:content> 11 </template>
</BadgeContainer>

Basic Usage Demo

The below example shows selected scenarios that can be implemented with the Badge and the BadgeContainer components. The badges in the SocialApps.vue file are defined using the BadgeContainer. All other badges available in the demo use the Badge component approach.

Example
View Source
Change Theme:

The Badge and the BadgeContainer components are part of the Kendo UI for Vue Native Indicators library. The procedures for installing, importing, and using the Indicators are identical for all components in the package. To learn how to use the Badge, the BadgeContainer and the rest of the Indicators, see the Getting Started with the Kendo UI for Vue Native Indicators guide.

Key Features

  • BadgeContainerSee how to use the BadgeContainer component and how to define its content.
  • PositioningYou can position the Kendo UI for Vue Native Badge and BadgeContainer on different places of the targeted element.
  • AppearanceYou can quickly style the Badge and the BadgeContainer by choosing from the predefined styling options.