Badge
Used for buttons, numbers or status markers next to icons.
Usage
import Badge from "@docspace/components/badge";
<Badge
label="10"
backgroundColor="#ED7309"
color="#FFFFFF"
fontSize="11px"
fontWeight={800}
borderRadius="11px"
padding="0 5px"
maxWidth="50px"
onClick={() => {}}
/>
Properties
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 |
label |
string |
- |
- |
0 |
Value |
onClick |
func |
- |
- |
- |
onClick event |
padding |
string |
- |
- |
0 5px |
CSS padding |
style |
obj , array |
- |
- |
- |
Accepts css style |