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

Describe the bug

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

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

Got to https://refine.dev/docs/ui-integrations/material-ui/components/buttons/create-button/#usage
Inspect the button
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>  
 

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Describe the bug

Steps To Reproduce

Expected behavior

Packages

Additional Context

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<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>

Uh oh!

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

Description

Describe the bug

Steps To Reproduce

Expected behavior

Packages

Additional Context

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions