# Vue Badge Container

The `BadgeContainer` component provides an alternative approach for defining a badge in the Kendo UI for Vue suite. Below you can find a basic **BadgeContainer** definition that uses a Slot template to define the content of the badge.

```jsx
<BadgeContainer
  :content="'content'"
  :align="{
    vertical: 'bottom',
    horizontal: 'end',
  }"
  :theme-color="'tertiary'"
>
  <SvgIcon :icon="copyIcon" style="width: 36px; color: #4eb9ed" />
  <template #content> 11 </template>
</BadgeContainer>
```

The following example demonstrates the definition of the same badges using the both **Badge** and **BadgeContainer** approaches side by side.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/indicators/badge/container/source.txt)

## Suggested Links

* [API Reference of the BadgeContainer](https://www.telerik.com/kendo-vue-ui/components/indicators/api/badgecontainer)
* [API Reference of the BadgeContainerProps](https://www.telerik.com/kendo-vue-ui/components/indicators/api/badgecontainerprops)
* [API Reference of the Badge](https://www.telerik.com/kendo-vue-ui/components/indicators/api/badge)
* [API Reference of the BadgeProps](https://www.telerik.com/kendo-vue-ui/components/indicators/api/badgeprops)