Kendo UI for Vue

Vue Badge

  • Add a visual indicator, or badge, to any element or component. Often used to show status (ex: online/offline) or notifications (ex: number of messages) in your Vue apps.
  • Part of Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation, and demos.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for Vue Badge component renders a visual indicator common to many apps. It attaches to any element or Vue component and shows the user critical information such as online status or unread messages. A common scenario is the online status displaying your avatar in popular messaging apps.

    See the Vue Badge demo

  • Positioning and Alignment

    the Vue Badge provides a number of options that help you place the badge exactly where you want it. These include placing it inside or outside the element, choosing the corner, and more. 

    See the Vue Badge Positioning demo

  • Appearance

    The Vue Badge provides a number of configuration options to help you style the component the way you need. These options include:

    • themeColor: apply the appropriate color from the theme with properties such as primary, secondary, inherit, info, success, and more.
    • rounded: set the radius of rounded corners to create a shape ranging from a square to an oval.
    • size: set the size of the Badge.
    • Fill: choose whether you'd like your Badge to be a solid color or just an outline.
    • cutoutBorder: choose a transparent border for a "cut out" look.

    See the Vue Badge Appearance demo



Get Started with Kendo UI for Vue

Kendo UI