Button should have an override to prevent from going to Icon in mobile

[patrickcollings]

Is your feature request related to a problem? Please describe.
We have what I thought would be a fairly normal scenario where our designs require the actions Buttons to remain full width in mobile and desktop. But when going to mobile they default to an icon button and there is no way to override this.

Describe the solution you'd like
A prop that can be passed to an Edit, Save button that simply overrides the isXSmall condition on a button.

Describe alternatives you've considered
Having to implement my own Edit or Save buttons and then removing that functionality however this seems wasteful.

Additional context
In Button.tsx we could just have an option added such as shrink. Which can default to true.

    return isXSmall && shrink ? (
        label && !disabled ? (
            <Tooltip title={translatedLabel}>
                <IconButton
                    aria-label={translatedLabel}
                    className={className}
                    color={color}
                    size="large"
                    {...rest}
                    {...linkParams}
                >
                    {children}
                </IconButton>
            </Tooltip>
        ) : (
            <IconButton
                className={className}
                color={color}
                disabled={disabled}
                size="large"
                {...rest}
                {...linkParams}
            >
                {children}
            </IconButton>
        )
    ) : (
        <StyledButton
            className={className}
            color={color}
            size={size}
            aria-label={translatedLabel}
            disabled={disabled}
            startIcon={alignIcon === 'left' && children ? children : undefined}
            endIcon={alignIcon === 'right' && children ? children : undefined}
            {...rest}
            {...linkParams}
        >
            {translatedLabel}
        </StyledButton>
    );

If you're happy with this then i'd be happy to open a PR. Is there anymore use cases that I'm potentially missing?

[djhi]

We try to avoid increasing the API surface whenever possible and prefer allowing you to provide your own components. I'll keep this issue open to let @fzaninotto and @slax57 chime though.

[slax57]

Since RA provides some useful buttons (CreateButton, EditButton, ...) that you may not want to rewrite, I think this feature would be a welcome addition. Besides, this really looks like it can be done quite quickly.
So I would upvote this change.

[fzaninotto]

Thanks for your suggestion.

A non-FAB create button is doable in a few lines in user land. Besides, I don't think your requirement is common enough to require a change in the react-admin library (you're the first asking for that in 6 years). So I'm on @djhi's side on this one.

So I'll lcose the issue, but don't hesitate to suggest more features!

[mjsarfatti]

I'd like to re-open this issue, since three years have passed. we are reviewing our app to make it responsive, and since we've been using ShowButton, CreateButton etc. everywhere, it's a bit of a mess to put it kindly.

The main issue is that it's not just a matter of fixing the CSS. Button actually switches the rendered component to IconButton with useMediaQuery so the deal is "we either accept that all our buttons become icon-only on mobile, or we accept that we can't use the provided ShowButton, CreateButton etc." 😕 It just seems a bit of a harsh choice (and it's definitely not a "few lines in user land" thing...)

I'd be happy to open a PR by the way.

[fzaninotto]

Thanks for your feedback. I like your breakpoint implementation. I'm reopening this issue and we'd welcome a PR (against next as it is a new feature).