@brighthr/component-badge

Badge

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:

`javascript
import Badge from '@brighthr/component-badge';
`
After adding import into your project you can use it simply like:

`jsx

`


Props

| 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. |