SuiBadgeDot

PRO

Our small indicator 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 PRO React components import SuiBadgeDot from "components/SuiBadgeDot";
Badge

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoChange the SuiBadgeDot indicator color.
size'xs''sm''md''lg'xsChange the SuiBadgeDot size.
badgeContent*nodeUse to pass node or content inside the SuiBadgeDot, its the only required prop.
font{ color: string, weight: string }{}Use to set the text color and font weight for the SuiBadgeDot
variant'gradient''contained'containedChange the SuiBadgeDot indicator background type.

Sizes

// Soft UI Dashboard PRO React components import SuiBadgeDot from "components/SuiBadgeDot";
Badge
Badge
Badge

Badge

Contents