Skip to content

Badge cut off when added to MenuItem #21639

@fzaninotto

Description

@fzaninotto

When adding a <Badge> to a <MenuItem>, it appears cut off:

image

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Badge is cut off

Expected Behavior 🤔

Badge isn't cut off

Steps to Reproduce 🕹

<MenuItem>
    <Badge badgeContent={1} color="error">Posts</Badge>
</MenuItem>

Context 🔦

Adding notifications to a navigation menu is a common use case

Your Environment 🌎

Tech Version
Material-UI v4.4.0
React Latest
Browser Chrome
TypeScript Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGreat for first contributions. Enable to learn the contribution process.scope: menuChanges related to the menu.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions