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

NameTypeDefaultDescription
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.