{
"props": {
"anchorOrigin": {
"type": {
"name": "shape",
"description": "{ horizontal?: 'left'
| 'right', vertical?: 'bottom'
| 'top' }"
},
"default": "{\n vertical: 'top',\n horizontal: 'right',\n}"
},
"badgeContent": { "type": { "name": "node" } },
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"color": {
"type": {
"name": "union",
"description": "'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string"
},
"default": "'default'"
},
"component": { "type": { "name": "elementType" } },
"components": {
"type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the slots prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details."
},
"componentsProps": {
"type": {
"name": "shape",
"description": "{ badge?: func
| object, root?: func
| object }"
},
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details."
},
"invisible": { "type": { "name": "bool" }, "default": "false" },
"max": { "type": { "name": "number" }, "default": "99" },
"overlap": {
"type": { "name": "enum", "description": "'circular'
| 'rectangular'" },
"default": "'rectangular'"
},
"showZero": { "type": { "name": "bool" }, "default": "false" },
"slotProps": {
"type": {
"name": "shape",
"description": "{ badge?: func
| object, root?: func
| object }"
},
"default": "{}"
},
"slots": {
"type": { "name": "shape", "description": "{ badge?: elementType, root?: elementType }" },
"default": "{}"
},
"sx": {
"type": {
"name": "union",
"description": "Array<func
| object
| bool>
| func
| object"
},
"additionalInfo": { "sx": true }
},
"variant": {
"type": {
"name": "union",
"description": "'dot'
| 'standard'
| string"
},
"default": "'standard'"
}
},
"name": "Badge",
"imports": ["import Badge from '@mui/material/Badge';", "import { Badge } from '@mui/material';"],
"slots": [
{
"name": "root",
"description": "The component that renders the root.",
"default": "span",
"class": "MuiBadge-root"
},
{
"name": "badge",
"description": "The component that renders the badge.",
"default": "span",
"class": "MuiBadge-badge"
}
],
"classes": [
{
"key": "anchorOriginBottomLeft",
"className": "MuiBadge-anchorOriginBottomLeft",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`.",
"isGlobal": false
},
{
"key": "anchorOriginBottomLeftCircular",
"className": "MuiBadge-anchorOriginBottomLeftCircular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap=\"circular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginBottomLeftRectangular",
"className": "MuiBadge-anchorOriginBottomLeftRectangular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap=\"rectangular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginBottomRight",
"className": "MuiBadge-anchorOriginBottomRight",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`.",
"isGlobal": false
},
{
"key": "anchorOriginBottomRightCircular",
"className": "MuiBadge-anchorOriginBottomRightCircular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap=\"circular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginBottomRightRectangular",
"className": "MuiBadge-anchorOriginBottomRightRectangular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap=\"rectangular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginTopLeft",
"className": "MuiBadge-anchorOriginTopLeft",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`.",
"isGlobal": false
},
{
"key": "anchorOriginTopLeftCircular",
"className": "MuiBadge-anchorOriginTopLeftCircular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap=\"circular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginTopLeftRectangular",
"className": "MuiBadge-anchorOriginTopLeftRectangular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap=\"rectangular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginTopRight",
"className": "MuiBadge-anchorOriginTopRight",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`.",
"isGlobal": false
},
{
"key": "anchorOriginTopRightCircular",
"className": "MuiBadge-anchorOriginTopRightCircular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap=\"circular\"`.",
"isGlobal": false
},
{
"key": "anchorOriginTopRightRectangular",
"className": "MuiBadge-anchorOriginTopRightRectangular",
"description": "Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap=\"rectangular\"`.",
"isGlobal": false
},
{
"key": "colorError",
"className": "MuiBadge-colorError",
"description": "Styles applied to the badge `span` element if `color=\"error\"`.",
"isGlobal": false
},
{
"key": "colorInfo",
"className": "MuiBadge-colorInfo",
"description": "Styles applied to the badge `span` element if `color=\"info\"`.",
"isGlobal": false
},
{
"key": "colorPrimary",
"className": "MuiBadge-colorPrimary",
"description": "Styles applied to the badge `span` element if `color=\"primary\"`.",
"isGlobal": false
},
{
"key": "colorSecondary",
"className": "MuiBadge-colorSecondary",
"description": "Styles applied to the badge `span` element if `color=\"secondary\"`.",
"isGlobal": false
},
{
"key": "colorSuccess",
"className": "MuiBadge-colorSuccess",
"description": "Styles applied to the badge `span` element if `color=\"success\"`.",
"isGlobal": false
},
{
"key": "colorWarning",
"className": "MuiBadge-colorWarning",
"description": "Styles applied to the badge `span` element if `color=\"warning\"`.",
"isGlobal": false
},
{
"key": "dot",
"className": "MuiBadge-dot",
"description": "Styles applied to the badge `span` element if `variant=\"dot\"`.",
"isGlobal": false
},
{
"key": "invisible",
"className": "MuiBadge-invisible",
"description": "State class applied to the badge `span` element if `invisible={true}`.",
"isGlobal": false
},
{
"key": "overlapCircular",
"className": "MuiBadge-overlapCircular",
"description": "Styles applied to the badge `span` element if `overlap=\"circular\"`.",
"isGlobal": false
},
{
"key": "overlapRectangular",
"className": "MuiBadge-overlapRectangular",
"description": "Styles applied to the badge `span` element if `overlap=\"rectangular\"`.",
"isGlobal": false
},
{
"key": "standard",
"className": "MuiBadge-standard",
"description": "Styles applied to the badge `span` element if `variant=\"standard\"`.",
"isGlobal": false
}
],
"spread": true,
"themeDefaultProps": true,
"muiName": "MuiBadge",
"forwardsRefTo": "HTMLSpanElement",
"filename": "/packages/mui-material/src/Badge/Badge.js",
"inheritance": null,
"demos": "