Badge
The Badge component is a versatile UI element designed to display notifications, counts, or statuses. It is highly customizable through a variety of props, allowing for different appearances and behaviors. Below is a detailed description of each prop and its usage.
Import
import { VKBadge } from "@vivakits/react-components";Variant
The variant prop determines the overall style and appearance of the badge. The variant prop allows to choose from 2 predefined styles, square and circular, which can provide different visual effects and suit various design requirements.
Size
The size prop controls the size of the badge. It accepts 6 predefined sizes such as xs sm md lg xl and 2xl. This allows precise control over the badge's dimensions to fit different UI elements.
Color
The color prop sets the background color of the badge. There are 7 predefined colors offered for the background of the badge to match applications theme or usage of the badge.
With border
Determines whether the badge has a border. When withBorder is set to true, the badge will display a border whose color can be customized using the borderColor prop. This can help the badge stand out more prominently against its background.
Border color
borderColor defines the color of the badge's border. This prop is particularly useful when withBorder is set to true, as it allows to specify a distinct color for the border, enhancing the visual distinction of the badge.
Placement
The placement pecifies the position of the badge relative to its container element. The placement prop enables you to place the badge at various positions, such as "top-right" or "bottom-left", ensuring it appears exactly where you need it within the UI layout. There are 4 predefined varieties available.
Invisible
invisible controls the visibility of the badge. When invisible is set to true, the badge will not be rendered visually but will remain in the DOM. This is useful for scenarios where you want to hide the badge temporarily without removing it from the layout. By default the value is set to false.
Content
The content to be displayed inside the badge. The content prop can include text, icons, or any other React elements, allowing for versatile and dynamic badge contents that can convey various types of information.
Show Zero
The showZero prop determines whether to display the badge when the content value is zero. When set to false, the badge will be hidden for zero values.
Show Plus Symbol
The showPlusSymbol prop adds a plus symbol after the numeric content. This is useful for indicating additional items beyond the displayed number. When combined with numbers greater than 99, it will show as "99+" regardless of the showPlusSymbol value
Style
The badgeStyle prop allows to apply inline CSS styles directly to the badge element. This provides granular control over the badge's appearance.
Example
Here are some examples of how Badge component can be used with the different props.
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| children | ReactNode | Displays badge content | - |
| variant | circularsquare | Changes badge appreance | square |
| color | primarysecondarysuccessdangerwarningdarklight | Changes badge color | success |
| borderColor | primarysecondarysuccessdangerwarningdarklight | Changes badge bordercolor | default |
| size | xssmmdlgxl2xl | Changes button size | md |
| onClick | function | Defines functionality on clicking the badge | - |
| invisible | boolean | Changes visibility of the badge | false |
| withBorder | boolean | Changes visibility of border of badge | false |
| showZero | boolean | Controls visibility of badge content when content is zero | true |
| showPlusSymbol | boolean | Adds plus symbol after numeric content | false |
| containerRef | RefObject | null | Used to pass a reference to the container element that the badge component should be appended to | - |
| containerProp | Object | Used to specify additional properties to be applied to the container element of the badge component | - |
| className | CSS | Additional CSS class(es) to apply to the components | - |
| badgeStyle | React.CSSProperties | Applies custom inline styles to the badge component | - |