MDBadge
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 MDBadge 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
// NextJS Material Dashboard 2 components
import Badge from "/components/Badge";
Badge
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | dark | Change the MDBadge background color. |
| variant | 'gradient''contained' | gradient | Change the MDBadge background type. |
| size | 'xs''sm''md''lg' | sm | Change the MDBadge size. |
| badgeContent* | node | Use to pass node or content inside the MDBadge, its the only required prop. | |
| circular | bool | false | Makes the MDBadge shape circular. |
| indicator | bool | false | Turn the MDBadge into a small indicator. |
| border | bool | false | Create a white border around the MDBadge. |
| container | bool | false | Turn the MDBadge into a container, its helpful for using only MDBadge without any other element. |
| MUI Props | You can pass all of the MUI Badge props for the MDBadge as well. |
Sizes
// NextJS Material Dashboard 2 components
import Badge from "/components/Badge";
Badge
Badge
Badge
Badge
Variants
// NextJS Material Dashboard 2 components
import Badge from "/components/Badge";
Gradient
Contained