Components / Indicators / Badge / Overview / 

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 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free 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">
  <SvgIcon :icon="vimeoIcon" :size="'xlarge'" style="color: #b3d062" />
  <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'"
>
  <SvgIcon :icon="copyIcon" style="width: 36px; color: #4eb9ed" />
  <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

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

Support and Learning Resources

Additional Resources

Previous
Getting Started
Next
Badge Container

In this article

Not finding the help you need?

Contact Support