Skip to content

[BUG] CreateButton of Material UI integration renders button in anchor #7085

New issue
New issue
Open
#7094
Open
[BUG] CreateButton of Material UI integration renders button in anchor#7085
#7094
Labels
bugSomething isn't working
@Bastian

Description

@Bastian
Bastian
opened on Oct 21, 2025

Describe the bug

The CreateButton of the Material UI integration renders a button element inside an a element:

Image

This is not recommended for accessibility reasons (see https://accessibleweb.com/question-answer/why-are-nested-interactive-controls-an-accessibility-issue/) and also harms keyboard usage: Tabbing through the application focuses the button twice (first the anchor then the button).

Steps To Reproduce

  1. Got to https://refine.dev/docs/ui-integrations/material-ui/components/buttons/create-button/#usage
  2. Inspect the button
  3. Test to focus the button with the keyboard -> It will be focused twice

Expected behavior

Interactive elements should not be nested

Packages

## System:
 - OS: macOS 15.5
 - CPU: (14) arm64 Apple M4 Pro
## Binaries:
 - Node: 24.5.0 - /opt/homebrew/bin/node
 - Yarn: 1.22.22 - /opt/homebrew/bin/yarn
 - npm: 11.5.1 - /opt/homebrew/bin/npm
## Browsers:
 - Chrome: 141.0.7390.108
 - Safari: 18.5
## Refine Packages:
 - @refinedev/cli: 2.16.48
 - @refinedev/core: 5.0.4
 - @refinedev/mui: 7.0.0
 - @refinedev/react-hook-form: 5.0.1
 - @refinedev/react-router: 2.0.1

Additional Context

Relevant Refine code:

refine/packages/mui/src/components/buttons/create/index.tsx

Lines 45 to 76 in 8c403b2

<LinkComponent
to={to}
replace={false}
onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
if (isDisabled) {
e.preventDefault();
return;
}
if (onClick) {
e.preventDefault();
onClick(e);
}
}}
style={{ textDecoration: "none" }}
>
<Button
disabled={isDisabled}
startIcon={!hideText && <AddBoxOutlined {...svgIconProps} />}
title={title}
variant="contained"
sx={{ minWidth: 0, ...sx }}
data-testid={RefineButtonTestIds.CreateButton}
className={RefineButtonClassNames.CreateButton}
{...restProps}
>
{hideText ? (
<AddBoxOutlined fontSize="small" {...svgIconProps} />
) : (
children ?? label
)}
</Button>
</LinkComponent>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions