Using the button as a Submit button

[avi747av]

Hi I'm trying to use this really Awesome button to submit a form (I'm using Formik) but I get a warning in the console that it's better to add type = submit but I can't because here the type means something else - the color of the button.

this is the warning:

Warning: You submitted a Formik form using a button with an unspecified type attribute. Most browsers default button elements to type="submit". If this is not a submit button, please add type="button".

Best regards Avi

[ugumba]

A related note: I'd like to use an AwesomeButton not as submit, but can't since there's no way to override the default <button> type.
In other words, if an AwesomeButton appears on a page with a <form>, the button will always submit the form.

[jodinathan]

this works:

<AwesomeButtonProgress
      element={({children, style, className}) =>
          <button style={style} className={className}
              type={'submit'}>{children}</button>}>
hello
</AwesomeButtonProgress>

[meliborn]

@jodinathan it breaks my hover and press events. I did it like this:

class MyAwesomeButton extends AwesomeButton {
	constructor(props) {
		super(props);
		this.extraProps = {
			type: props.buttonType,
		};
	}
}

<MyAwesomeButton buttonType="submit|button" />

[Princejain21]

Awesomebuttonprogress , Is it html tag or an imported component?

[Neuroforge]

This is an absolute killer of an issue. I really want to use this library, but i am not maintaining button hacks site wide. This should be addressed as this library is awesome, but this problem is a deal breaker. :(

The typescript version is even worse! And it loses the animation effect. :(

    <AwesomeButton
      type={type}
      size="large"
      before={props.startIcon}
      disabled={props.disabled}
      element={
        childElement as React.ForwardRefExoticComponent<
          React.RefAttributes<
            HTMLAnchorElement | HTMLDivElement | HTMLButtonElement
          >
        >
      }
    >
      {props.children}
    </AwesomeButton>

This does indeed work, but i lose the animated button wobble. Everything else looks good, i think.

[Neuroforge]

Ok.

This works as the element and maintains the animation.,

const NestedButton = forwardRef<HTMLButtonElement>((props, ref) => (
  <button ref={ref} {...props} />
));