### Размер badge Размер задается с помощью свойства `size` . Возможные значения свойства: `l` , `m` , `s` , `xs` .
```tsx
import React from 'react';
import { Badge } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```
### Скругленность badge Скругленность задается с помощью свойства `pilled` :
```tsx
import React from 'react';
import { Badge } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```
### Вид badge Вид `badge` задается с помощью свойства `view` .
Так же на вид badge влияет свойства `transparent` и `clear` .
```tsx
import React from 'react';
import { Badge } from '@salutejs/plasma-web';
export function App() {
const Badges = ({transparent, clear}) => {
return (
)
}
return (
);
}
```
### Иконка слева / справа В левой или правой части badge можно отобразить иконку.
Если же нужен Badge с иконкой без текста, нужно использовать `contentLeft` .
```tsx
import React from 'react';
import { Badge } from '@salutejs/plasma-web';
import { IconEye } from '@salutejs/plasma-icons';
export function App() {
return (
}
/>
}
/>
}
/>
);
}
```
### Задание цвета текста и фона Цвет текста и фона можно задать с помощью свойств
`customColor` и `customBackgroundColor` соответственно.
```tsx
import React from 'react';
import { Badge } from '@salutejs/plasma-web';
export function App() {
return (
);
}
```