2019-07-03 13:23:53 +00:00
|
|
|
# Badge
|
|
|
|
|
|
2019-11-19 14:25:40 +00:00
|
|
|
Used for buttons, numbers or status markers next to icons.
|
2019-07-03 13:23:53 +00:00
|
|
|
|
2019-11-19 14:25:40 +00:00
|
|
|
### Usage
|
2019-07-03 13:23:53 +00:00
|
|
|
|
2019-11-19 14:25:40 +00:00
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import Badge from "@appserver/components/badge";
|
2019-07-03 13:23:53 +00:00
|
|
|
```
|
|
|
|
|
|
2019-11-19 14:25:40 +00:00
|
|
|
```jsx
|
|
|
|
|
<Badge
|
2020-01-13 12:35:37 +00:00
|
|
|
label="10"
|
2019-11-19 14:25:40 +00:00
|
|
|
backgroundColor="#ED7309"
|
|
|
|
|
color="#FFFFFF"
|
|
|
|
|
fontSize="11px"
|
|
|
|
|
fontWeight={800}
|
|
|
|
|
borderRadius="11px"
|
|
|
|
|
padding="0 5px"
|
|
|
|
|
maxWidth="50px"
|
|
|
|
|
onClick={() => {}}
|
|
|
|
|
/>
|
|
|
|
|
```
|
2019-07-03 13:23:53 +00:00
|
|
|
|
2019-11-19 14:25:40 +00:00
|
|
|
### Properties
|
2019-07-03 13:23:53 +00:00
|
|
|
|
2019-11-26 09:09:39 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
|
| ----------------- | :------------: | :------: | :----: | :-------: | -------------------- |
|
|
|
|
|
| `backgroundColor` | `string` | - | - | `#ED7309` | CSS background-color |
|
|
|
|
|
| `borderRadius` | `string` | - | - | `11px` | CSS border-radius |
|
|
|
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
|
|
|
| `color` | `string` | - | - | `#FFFFFF` | CSS color |
|
|
|
|
|
| `fontSize` | `string` | - | - | `11px` | CSS font-size |
|
|
|
|
|
| `fontWeight` | `number` | - | - | `800` | CSS font-weight |
|
|
|
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
|
|
|
| `maxWidth` | `string` | - | - | `50px` | CSS max-width |
|
2020-01-13 12:35:37 +00:00
|
|
|
| `label` | `string` | - | - | `0` | Value |
|
2019-11-26 09:09:39 +00:00
|
|
|
| `onClick` | `func` | - | - | - | onClick event |
|
|
|
|
|
| `padding` | `string` | - | - | `0 5px` | CSS padding |
|
|
|
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
