Skip to content
+

Badge

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

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

NameTypeDefaultDescription
badgeContentReact.ReactNode-

The content rendered within the badge.

invisiblebooleanfalse

If true, the badge is invisible.

maxnumber99

Max count to show.

showZerobooleanfalse

Controls whether the badge is hidden when badgeContent is zero.

Return value

NameTypeDescription
badgeContentReact.ReactNode

Defines the content that's displayed inside the badge.

displayValueReact.ReactNode

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

invisibleboolean

If true, the component will not be visible.

maxnumber

Maximum number to be displayed in the badge.