Variable BadgeConst

Type Declaration

• • (props: BadgeProps): Element

  • A customized Material-UI Badge component.

    Parameters

    • props: BadgeProps

      The properties for the Badge component

    Returns Element

    A rendered Badge component

    Component

    Example

    // Basic usage
    <Badge badgeContent={4}>
      <MailIcon />
    </Badge>
    
    // With custom color
    <Badge
      badgeContent={100}
      color="secondary"
      max={99}
    >
      <NotificationsIcon />
    </Badge>
    
    // With custom styling
    <Badge
      badgeContent={4}
      sx={{
        '& .MuiBadge-badge': {
          backgroundColor: 'custom.main'
        }
      }}
    >
      <IconButton>
        <MessageIcon />
      </IconButton>
    </Badge>
    Copy

    Note

    For performance optimization in cases of frequent parent re-renders, consider wrapping this component with React.memo at the consumption level.

    See

    https://mui.com/material-ui/api/badge/