To install, type the following into the command line at the root of your project:
npm i @brighthr/component-badge
To implement the Badge component into your project you’ll need to add the import:
import Badge from '@brighthr/component-badge';After adding import into your project you can use it simply like:
<Badge />| Name | Type | Default | Description |
|---|---|---|---|
| background |
'default' 'dark' 'white' 'none'
|
'default' |
Sets the background color of the badge. |
| fullWidth | boolean |
false |
Sets the badge width to 100%. |
| hasMarker | boolean |
false |
If true, adds a marker to the badge. |
| iconName | string |
Sets the icon to display in the badge, the icon component uses calendar-dates if left empty. |
|
| iconPosition |
'left' 'right'
|
Sets the position of the icon, if left empty the icon will not show. | |
| markerDoesBlink | boolean |
false |
If true, the marker will have a blinking animation. |
| size |
'xs' 'sm' 'base' 'lg' 'xl'
|
'base' |
Sets the size of the badge. |
| status |
'default' 'warning' 'information' 'success' 'error' 'notification'
|
'default' |
Sets the color theme of the badge. |
| text | string |
Sets the text inside the badge. | |
| uppercase | boolean |
false |
If true, the text will be uppercase. |