# BadgeNotification
- **Package**: `KIT`
- **Type**: components
Simple non-interactive badge. Used in headers, cells, cards, avatars to indicate notifications, such as new messages
### Example
```html
11
```
### API - Inputs
| Property | Type | Description |
|----------|-----|----------|
| [size] | `TuiSizeL` | — |
### Usage Examples
#### Basic
**Template:**
```html
Desktop
9
9
9
9
Android
9
9
9
9
IOS
9
9
9
9
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiPlatform} from '@taiga-ui/cdk';
import {TuiBadgeNotification} from '@taiga-ui/kit';
@Component({
imports: [TuiBadgeNotification, TuiPlatform],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
tui-badge-notification {
margin: 0.2rem;
}
```
#### Custom color
**Template:**
```html
10
11
12
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiBadgeNotification} from '@taiga-ui/kit';
@Component({
imports: [TuiBadgeNotification],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
@import '@taiga-ui/styles/utils.less';
tui-badge-notification {
margin: 0.2rem;
.gradient(#c86dd7, #3023ae);
}
```