Vue Badge - Comprehensive Badge Component

Overview

The Vue Badge is a pure CSS component used to convey notifications, messages, or statuses in different shapes and sizes. The Badge component can be easily integrated with ListView, Avatar, and other container controls.

Custom position

Even though badges support the conventional top and bottom positions, badge positions can be changed as desired. This can be done by adding a custom class to the badge element to override the default position applied from the source.

• Custom position documentation

Predefined styles

Eight predefined contextual color variants are available for badges.

Types of badges

The CSS Badge control supports six different styles: default, circle, pill, notification, ghost, and dot.

• Types of badges documentation.

UI customization

Completely customize the CSS Badge attributes, like dimensions and colors.

• Badge customization documentation.

Other supported frameworks

The Badge component is also available in React, Angular, and JavaScript frameworks. Check out the Badge on different platforms from these links:

• React Badge

• Angular Badge

• JavaScript Badge

Vue Badge code example

Easily get started with the Vue Badge using a few simple lines of Vue code, as demonstrated below. Also explore our Vue Badge Example that shows you how to render and configure a Badge in Vue.

<template> 
  <div id="app">
       <h1>Badge Component <span class="e-badge">New</span></h1>
  </div>
</template>

<script>
    import Vue from "vue";
	export default
	{
	  data()
	  {
	  return {};
	  }
	}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/material.css";
</style>