Skip to content
Edit this page
+

Badge

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

DemosComponents APIHooks API

useBadge API

Import

import useBadge from '@mui/base/useBadge';
// or
import { useBadge } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.

Parameters

badgeContent

The content rendered within the badge.

Type:

React.ReactNode
invisible

If true, the badge is invisible.

Type:

boolean

Default:

false
max

Max count to show.

Type:

number

Default:

99
showZero

Controls whether the badge is hidden when badgeContent is zero.

Type:

boolean

Default:

false

Return value

badgeContent

Defines the content that's displayed inside the badge.

Type:

React.ReactNode
displayValue

Value to be displayed in the badge. If badgeContent is greater than max, it will return max+.

Type:

React.ReactNode
invisible

If true, the component will not be visible.

Type:

boolean
max

Maximum number to be displayed in the badge.

Type:

number