# Appearance

The Badge provides a set of predefined appearance options such as various border radius, sizes, theme colors, and optional cutout borders.

> Since [version 22.1.0](https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui#v22.1.0), default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
>
> For more information, refer to the [Design System documentation](https://www.telerik.com/design-system).

The following example demonstrates all available appearance options of the Badge in action.

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

## Theme Color

The Badge allows you to specify predefined theme colors. The theme color will be applied as a background and border color while amending the text color accordingly.

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

* `base`
* `primary`
* `secondary`
* `tertiary`
* `info`
* `success`
* `warning`
* `error`

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

## Rounded

The Badge allows you to set different border radius.

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

* `small`
* `medium`
* `large`
* `full`
* `none`

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

## Size

The Badge allows you to set different sizes.

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

* `small`
* `medium`
* `large`

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

## Fill Mode

The Badge enables you to create solid, tint, or outline badges through the [`fillMode`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent#fillmode) property.

The available `fillMode` values are:

* `solid`
* `tint`
* `outline`

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

## Cutout Border

The Badge allows you to specify whether or not to render an additional `cutout` border around its content by using the [`cutoutBorder`](https://www.telerik.com/kendo-angular-ui-develop/components/indicators/api/badgecomponent#cutoutBorder) property. By default, `cutoutBorder` is set to `false`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/indicators/badge/appearance/cutout-border/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)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-angular-ui-develop/components/styling/theme-builder)