BottomNavigation component using showLabel instead of showlabel and it's causing a warning/error message in console

[mikebski]

Steps to reproduce

Steps:

1. Use BottomNavigation in a project
2. Load the page
3. Look at the JS console

Code for BottomNavigation:

<BottomNavigation>
                    <Typography
                        variant="body2"
                        align="center"
                        sx={{
                            color: 'text.secondary',
                        }}
                    >
                        {'Copyright © '}
                        <Link color="inherit" href="https://example.com.com/">
                            Example LLC
                        </Link>{' '}
                        {new Date().getFullYear()}.
                    </Typography>
                </BottomNavigation>

Current behavior

Warning: React does not recognize the `showLabel` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showlabel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Expected behavior

No warnings

Context

Use BottomNavigation without React carping about this showLabel.

Your environment

npx @mui/envinfo

FF 1.32.0.1 64-bit ``` System: OS: Linux 6.9 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat) Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.116 npmPackages: @emotion/react: ^11.14.0 => 11.14.0 @emotion/styled: ^11.14.0 => 11.14.0 @mui/core-downloads-tracker: 6.2.0 @mui/icons-material: ^6.2.0 => 6.2.0 @mui/material: ^6.2.0 => 6.2.0 @mui/private-theming: 6.2.0 @mui/styled-engine: 6.2.0 @mui/system: ^6.2.0 => 6.2.0 @mui/types: 7.2.19 @mui/utils: 6.2.0 @mui/x-date-pickers: ^7.23.2 => 7.23.2 @mui/x-internals: 7.23.0 @types/react: ^18.3.12 => 18.3.17 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ~5.6.2 => 5.6.3

</details>


**Search keywords**: BottomNavigation showLabel

[mnajdova]

The <ButtonNavigation /> expects <ButtonNavigationActions /> as children, this is why it shows the error. You likely want to build a footer component instead of using the ButtonNavigation. I hope this helps.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mikebski How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.