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