Skip to content
+

Badge

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

Component 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