Button component from react-aria-component doesn't allow to pass default html attributes

[KsushaDk]

I need to pass some attributes like translate and title to the Button component, which are default HTML attributes for tags like <button>. I haven't managed to find a solution for this in the react-aria-component documentation, and I can see from the Button code that it's not possible. Could you please help me find a workaround? Thank you in advance.

[snowystinger]

I think we could include 'translate'.

I think we'd push for people to use Tooltip instead of title. Would that suit your needs?

What were the others you needed?

[KsushaDk]

Thank you for your response. Including 'translate' would be very helpful!
Regarding the Tooltip, could you please clarify why it is preferred over the default title attribute? I'm interested in understanding the benefits of custom Tooltip in such simple situation.
I guess those are the only two extra attributes that I need for now. Thank you!

[snowystinger]

I think the major reason would be that you can style a Tooltip, you cannot style the title element. Otherwise, they serve the same purpose. You can see the features of tooltip here https://react-spectrum.adobe.com/react-aria/Tooltip.html#features

Feel free to open an issue for adding Translate and PR if you're up for it!

[lorenzo-dallamuta]

Including the title attribute for buttons would be greatly appreciated given that the alternative with Tooltip would be to re-implement the browser's default look with our own css when the browser already does that out of the box.

(This is especially true for users who want to mix react aria components with other solutions, think for example a div containing both Next's links and React Aria buttons....)

[incutonez]

I had the same issue, and I came up with a solution, but I honestly don't know if it's, um, the proper React way? Anyway, I do something like this... I have a wrapper button component with my own props. Here's the minimized pseudo code:

// BaseButton.tsx
import { RefObject, useEffect, useRef } from "react";
import { Button as AriaButton, ButtonProps as IAriaButton } from "react-aria-components";

export interface IBaseButton extends IAriaButton {
	title?: string;
	ref?: RefObject<HTMLButtonElement>;
}

export function BaseButton({ title, ref, ...props }: IBaseButton) {
	const internalRef = useRef<HTMLButtonElement>(null);

	function onRef(el: HTMLButtonElement) {
		if (ref) {
			ref.current = el;
		}
		internalRef.current = el;
	}

	useEffect(() => {
		if (internalRef.current && title) {
			internalRef.current.title = title;
		}
	}, [internalRef, title]);

	return (
		<AriaButton
			{...props}
			ref={onRef}
		/>
	);
}

I realize it's a bit of code just to get a title added, but this also applies to any HTML button attributes that are missing on the Aria Button.