React Badge Dot - Soft UI
PROOur 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 SoftBadgeDot from "components/SoftBadgeDot";
Badge
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| color | 'primary''secondary''info''success''warning''error''light''dark' | info | Change the SoftBadgeDot indicator color. |
| size | 'xs''sm''md''lg' | xs | Change the SoftBadgeDot size. |
| badgeContent* | node | Use to pass node or content inside the SoftBadgeDot, its the only required prop. | |
| font | { color: string, weight: string } | {} | Use to set the text color and font weight for the SoftBadgeDot |
| variant | 'gradient''contained' | contained | Change the SoftBadgeDot indicator background type. |
Sizes
// Soft UI Dashboard PRO React components
import SoftBadgeDot from "components/SoftBadgeDot";
Badge
Badge
Badge