import Badge from '../Badge'
import Button from '../Button'
import Div from '../Div'
import Icon from '../Icon'
import Row from '../Row'
import { faThumbsUp, faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { Sandbox } from '@startupjs/docs'
import './index.mdx.styl'
# Badge (Бейдж)
Бейджи - это небольшие дескрипторы состояния для элементов пользовательского интерфейса.
```js
import { Badge } from '@startupjs/ui'
```
## Простой пример
```jsx example
return (
)
```
## Sizes
Бейджи бывают трех разных размеров: `s`, `m` и `l`. Размер `m` является наиболее часто используемым и определен по умолчанию. Остальные размеры следует использовать с осторожностью, чтобы не нарушить иерархию важности на странице.
```jsx example
return (
)
```
## Variants
Бейджи бывают двух видов: `default` и `dot`. `default` является наиболее часто используемым и определен по умолчанию. `dot` превращает бейдж в маленькую точку, это можно использовать как уведомление о том, что что-то изменилось. При значении свойства `variant='dot'` свойство `size` будет игнорироваться.
```jsx example
return (
)
```
## Colors
По умолчанию цвет является `primary`. Его можно изменить, передав имя цвета из списка цветов конфигурации в свойство `color`. Возможные значения свойства можно найти в песочнице внизу страницы.
```jsx example
return (
)
```
## Positions
Бейдж может находится в двух положениях: `top` и `bottom`. **Значение по умолчанию:** `top`.
```jsx example
return (
)
```
## Icons
Иконка может быть добавлена с помощью свойства `icon`.
```jsx example
return (
)
```
## Счетчик
Если свойство `label` содержит числовое значение, то можно использовать свойство `max` чтобы ограничить максимальное отображаемое число в лейбле.
```jsx example
return (
)
```
## Sandbox
}}
noScroll
/>