Search code examples
react-admin

Button component disappear in mobile

In my React-Admin project I'm using the Button component to call my custom methods but it disappears in the 'sm' (mobile) breakpoint.

It depends directly from React-Admin because using the MUI Button component next to it, the MUI Button is shown in every breakpoint.

I attach the code (the 1st disappear, the 2nd always on):

import { Button } from 'react-admin';
import { Button as ButtonMui } from '@mui/material';
[...]
<Button onClick={() => alert('Button RA')} label='Infos' startIcon={<Info />} />
<ButtonMui onClick={() => alert('Button MUI')} startIcon={<Info />}>Infos</ButtonMui>

How can I show React-Admin Button component in all breakpoints?

Solution

  • This is a feature of the <Button> component, that cannot be disabled.

    As mentioned in the docs:

    Responsive (displays only the icon with a tooltip on mobile) and accessible.

    If you don't want that feature, I would recommend using MUI's <Button> directly. RA's <Button> is simply a wrapper around MUI's <Button> after all.