MKBadge
Our small count and labelling component. It uses MUI Badge in base and you can use all of the props from MUI Badge for the MKBadge component.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// Otis Kit PRO Components
import Badge from "components/Badge";
Badge
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change the MKBadge background color. |
| variant | 'gradient''contained' | gradient | Change the MKBadge background type. |
| size | 'xs''sm''md''lg' | sm | Change the MKBadge size. |
| badgeContent* | node | Use to pass node or content inside the MKBadge, its the only required prop. | |
| circular | bool | false | Makes the MKBadge shape circular. |
| indicator | bool | false | Turn the MKBadge into a small indicator. |
| border | bool | false | Create a white border around the MKBadge. |
| container | bool | false | Turn the MKBadge into a container, its helpful for using only MKBadge without any other element. |
| MUI Props | You can pass all of the MUI Badge props for the MKBadge as well. |
Sizes
// Otis Kit PRO Components
import Badge from "components/Badge";
Badge
Badge
Badge
Badge
Variants
// Otis Kit PRO Components
import Badge from "components/Badge";
Gradient
Contained