Badge

The Badge component generates a small label that is attached to its child element.

Badge API

Import

import Badge from '@mui/base/Badge';
// or
import { Badge } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

badgeContent

The content rendered within the badge.

Type:

node

children

The badge will be added relative to this node.

Type:

node

invisible

If true, the badge is invisible.

Type:

bool

Default:

false

max

Max count to show.

Type:

number

Default:

99

showZero

Controls whether the badge is hidden when badgeContent is zero.

Type:

bool

Default:

false

slotProps

The props used for each slot inside the Badge.

Type:

{ badge?: func | object, root?: func | object }

Default:

{}

slots

The components used for each slot inside the Badge. Either a string to use a HTML element or a component.

Type:

{ badge?: elementType, root?: elementType }

Default:

{}

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

root'span'Required

Global class: .MuiBadge-root

Description: The component that renders the root.

badge'span'Required

Global class: .MuiBadge-badge

Description: The component that renders the badge.

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.

CSS classes

These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.

.MuiBadge-invisible

State class applied to the badge span element if invisible={true}.