• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetnew
    • ToolBar
    • Tooltips
    • TreeListupdated
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Indicators / Badge / Badge Container / 
New to Kendo UI for Angular? Start a free 30-day trial

Badge Container

The Badge delivers the BadgeContainer component that enables you to target text, HTML elements, or Angular components which cannot host content.

To implement the functionality, wrap both the targeted element and the Badge inside a kendo-badge-container tag.

When you use the Badge without the BadgeContainer, make sure that the CSS position of the HTML element or Angular component which contains a badge is different from static and allows overflow content.

The following example demonstrates both approaches in action.

Example
View Source
Change Theme:

Suggested Links

Previous
Overview
Next
Alignment and Positioning

In this article

Not finding the help you need?

Contact Support