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:

import Badge from '@brighthr/component-badge';

After adding import into your project you can use it simply like:

<Badge />

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