[joy-ui][Button] Disabled style is not applied when component prop is used

[DiegoAndai]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/joy-disabled-non-button-t9x84m

Steps:

1. Use Joy UI Button component
2. Provide disabled prop
3. Provide component="a" prop (or any other that's not "button")

Current behavior 😯

The button is disabled (onClick does not fire), but the style does not change accordingly.

Expected behavior 🤔

The button should have the disabled appearance.

Context 🔦

No response

Your environment 🌎

Joy UI v5.0.0-beta.6

[sai6855]

changing selector from below line &:disabled to &[aria-disabled="true"] worked.

material-ui/packages/mui-joy/src/Button/Button.tsx

Line 160 in d4c308a

'&:disabled': theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],

Reason of issue could be because base useButton hook is not adding disabled prop when component is of not button type. we can either add disabled prop for all component types or change css selector.

material-ui/packages/mui-base/src/useButton/useButton.ts

Lines 194 to 210 in d4c308a

	if (hostElementName === 'BUTTON') {
	buttonProps.type = type ?? 'button';
	if (focusableWhenDisabled) {
	buttonProps['aria-disabled'] = disabled;
	} else {
	buttonProps.disabled = disabled;
	}
	} else if (hostElementName !== '') {
	if (!href && !to) {
	buttonProps.role = 'button';
	buttonProps.tabIndex = tabIndex ?? 0;
	}
	if (disabled) {
	buttonProps['aria-disabled'] = disabled as boolean;
	buttonProps.tabIndex = focusableWhenDisabled ? tabIndex ?? 0 : -1;
	}
	}

[DiegoAndai]

we can either add disabled prop for all component types or change css selector.

The disabled attribute is only supported by a few elements, so I wouldn't change Base's implementation.

Another option, which I think is what we should do, is to use the disabled prop in the Button's ownerState instead of the '&:disabled' selector, something like

- '&:disabled'
+ ownerState.disabled

[sai6855]

The disabled attribute is only supported by a few elements, so I wouldn't change Base's implementation.

Ah I see thanks for info, since disabled attribute is supported by multiple elements as shown in mdn doc's. Should base UI also support them instead of just button?

[DiegoAndai]

The hook is useButton, so I think it's fine to only support button for the disabled state until we have a specific case where we need to add the disabled attribute to other elements that support it. This is not such a case as the element might not be one of the ones that support the disabled attribute.

The disabled state is managed on the user side (Joy in this case) and provided to the useButton hook, so the user already has a variable that indicates the disabled state. That's what I propose in this case: use the disabled prop in Joy's Button owner state.