# BadgedContent
- **Package**: `KIT`
- **Type**: components
BadgedContent is a wrapper for other components to add badges and notifications to them.
### Example
```html
1
```
### API - Inputs
| Property | Type | Description |
|----------|-----|----------|
| style.--t-radius | `string` | border radius |
### Usage Examples
#### Basic
**Template:**
```html
99 120 99
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';
@Component({
imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
:host {
display: flex;
gap: 1rem;
}
```
#### Rounded content
**Template:**
```html
8 Taiga 99
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';
@Component({
imports: [TuiAvatar, TuiBadge, TuiBadgedContent, TuiBadgeNotification],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
:host {
display: flex;
gap: 1rem;
}
```
#### With different components
**Template:**
```html
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiButton, TuiInput} from '@taiga-ui/core';
import {TuiBadge, TuiBadgedContent, TuiBadgeNotification} from '@taiga-ui/kit';
@Component({
imports: [TuiBadge, TuiBadgedContent, TuiBadgeNotification, TuiButton, TuiInput],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
:host {
display: flex;
gap: 1rem;
}
tui-textfield {
min-inline-size: 10rem;
}
```
#### With image
**Template:**
```html
```
**TypeScript:**
```ts
import {Component} from '@angular/core';
import {changeDetection} from '@demo/emulate/change-detection';
import {encapsulation} from '@demo/emulate/encapsulation';
import {TuiAvatar, TuiBadgedContent} from '@taiga-ui/kit';
@Component({
imports: [TuiAvatar, TuiBadgedContent],
templateUrl: './index.html',
styleUrl: './index.less',
encapsulation,
changeDetection,
})
export default class Example {}
```
**LESS:**
```less
:host {
display: flex;
gap: 1rem;
}
```
The wrapped element is assumed to have 12px border-radius. If it is different, override the
`--tui-radius`
variable with actual value.
