React Badge - Soft UI
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 SoftBadge 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
// Soft UI Dashboard React 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 SoftBadge background color. |
| variant | 'gradient''contained' | gradient | Change the SoftBadge background type. |
| size | 'xs''sm''md''lg' | sm | Change the SoftBadge size. |
| badgeContent* | node | Use to pass node or content inside the SoftBadge, its the only required prop. | |
| circular | bool | false | Makes the SoftBadge shape circular. |
| indicator | bool | false | Turn the SoftBadge into a small indicator. |
| border | bool | false | Create a white border around the SoftBadge. |
| container | bool | false | Turn the SoftBadge into a container, its helpful for using only SoftBadge without any other element. |
| MUI Props | You can pass all of the MUI Badge props for the SoftBadge as well. |
Sizes
// Soft UI Dashboard React components
import Badge from "components/Badge";
Badge
Badge
Badge
Badge
Variants
// Soft UI Dashboard React components
import Badge from "components/Badge";
Gradient
Contained