components
Badge
v.1.0.0 | SaturnVisual indicator for pending tasks or messages.
[CODE]
Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for its quick use. Access them through the variant prop:
[CODE]
Basic component
Some props are required for the usage of badge:
-
size: to set the current size of the badge.
-
icon: for adding the main icon to the component.
-
popover: set inside de BADGE option.
Also a text label can be added to given further context to users.
[CODE]
Dot
A dot can be added to indicate the existence of pending actions or notifications. Also, to indicate the exact number of pendient notifications. Its visibility can be controlled throught the hasDot prop.
Check the dot component documentation for extra features.
[CODE]