# Alignment and Positioning

The Badge provides options for aligning and positioning it in relation to its parent container—an HTML element or an Angular Component.

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

## Alignment

The Badge allows you to align it in relation to its parent container.

The available [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent#align) values are:

* `{ vertical: 'top', horizontal: 'end' }`—(Default) Aligns the Badge to the top-right corner of the container.
* `{ vertical: 'top', horizontal: 'start' }`—Aligns the Badge to the top-left corner of the container.
* `{ vertical: 'bottom', horizontal: 'start' }`—Aligns the Badge to the bottom-left corner of the container.
* `{ vertical: 'bottom', horizontal: 'end' }`—Aligns the Badge to the bottom-right corner of the container.

> When you use the Badge without the [`BadgeContainer`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecontainercomponent), make sure that the CSS position of the HTML element or Angular component which contains a badge is different from [`static`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) and allows [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) content.

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

## Position

The Badge allows you to specify the position of the badge in relation to the edge of its parent container.

The available [`position`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent#position) values are:

* `edge`—(Default) The center of the Badge is positioned on the edge of the parent container element.
* `inside`—The Badge is positioned entirely inside the edge of the parent container element.
* `outside`—The Badge is positioned entirely outside the edge of the parent container element.
* `none`—The Badge flows inline with its content instead of being positioned against the parent container. The [`align`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent#align) option and its default `{ vertical: 'top', horizontal: 'end' }` do not apply in this mode.

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

## Suggested Links

* [API Reference of the Badge](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent)
* [API Reference of the BadgeContainer](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecontainercomponent)