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
Badge is small state descriptors for UI elements.
```js
import { Badge } from '@startupjs/ui'
```
## Simple example
```jsx example
return (
)
```
## Sizes
Badges come in three different sizes: `s`, `m`, and `l`. The `m` size is the default and most frequently used. The other sizes should be used with care so as not to break the hierarchy of importance on the page.
```jsx example
return (
)
```
## Variants
There are two types of Badges: `default` and `dot`. `default` it is the most frequently used and the default specified. `dot` turns the badge into a small dot, this can be used as a message that something has changed. If the property is `variant='dot'`, the `size` property will be ignored.
```jsx example
return (
)
```
## Colors
Color is `primary` by default. It can be changed by passing color name from the config colors to `color` property. Possible values of property can be found in the `Sandbox` section at the bottom of the page.
```jsx example
return (
)
```
## Position
Badge can be in two positions: `top` and `bottom`. **Default value:** `top`.
```jsx example
return (
)
```
## Icons
Icon can be added using `icon` property.
```jsx example
return (
)
```
## Counter
If `label` property takes a numeric value, then the `max` property can be used to limit the maximum displayed number in the label.
```jsx example
return (
)
```
## Sandbox
}}
noScroll
/>