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

// Material Kit 2 React Components import Badge from "components/Badge"; Badge

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoChange the MKBadge background color.
variant'gradient''contained'gradientChange the MKBadge background type.
size'xs''sm''md''lg'smChange the MKBadge size.
badgeContent*nodeUse to pass node or content inside the MKBadge, its the only required prop.
circularboolfalseMakes the MKBadge shape circular.
indicatorboolfalseTurn the MKBadge into a small indicator.
borderboolfalseCreate a white border around the MKBadge.
containerboolfalseTurn the MKBadge into a container, its helpful for using only MKBadge without any other element.
MUI PropsYou can pass all of the MUI Badge props for the MKBadge as well.

Sizes

// Material Kit 2 React Components import Badge from "components/Badge"; Badge Badge Badge Badge

Variants

// Material Kit 2 React Components import Badge from "components/Badge"; Gradient Contained