SubmitButton

SubmitButton provides user feedback when submitting a form.

SubmitButton is a primary Button with a loading indicator
- Primary buttons are used for submitting forms and processing data
- Secondary buttons are generally used for canceling or navigating back/forward within a flow
SubmitButton will automatically swap to its loading state when a Formik form is being submitted
- Read more about the requirements for automatic loading state management
The loading prop can be used to trigger the loading state on non-Formik forms

Note: Formik submit functions must be async and return a promise in order to manage the loading state. Failing to do so will cause the loading state to hang indefinitely and prevent users from moving forward.

React props
Name	Type	Default	Description
after	`ReactNode`		Content shown after children.
before	`ReactNode`		Content shown before the children.
children	`ReactNode`		The content of the Link.
color	`errorprimary`	primary	Background and foreground colors.
edge	`endstart`		Aligns the visual edge of a button along a specified side. For example, edge="start" aligns the text of a tertiary button to align with content above and below on the left side.
getLoadingText	`(() => string)`		Determines the screen reader accessible text to be displayed when the button is in the loading state.
loading	`boolean`		If `true`, a loading indicator will be shown. See SubmitButton for a ready-made component.
size	`smallmediumlarge`	large	The size of the button when variant is set to "primary" or "secondary".
variant	`linkprimarysecondarytertiary`	primary	Determines the shape of the element (button or text link).

The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.

// BASIC TESTS

const onSubmit = jest.fn();
render(
  <form onSubmit={onSubmit}>
    <input name="fname" aria-label="First name" />
    <SubmitButton>Save</SubmitButton>
  </form>,
);

const submitButton = screen.getByRole('button', {
  name: 'Save',
}) as HTMLButtonElement;

fireEvent.submit(submitButton.form as HTMLFormElement);
expect(onSubmit).toHaveBeenCalled();


// TESTING LOADING

const onSubmit = jest.fn();
render(
  <form onSubmit={onSubmit}>
    <input name="fname" aria-label="First name" />
    <SubmitButton loading>Save</SubmitButton>
  </form>,
);

const submitButton = screen.getByRole('button', {
  name: /Save/,
});

// Unfortunately JSDOM will circumvent our disabled state
// if we call fireEvent.submit(submitButton.form), so instead we'll
// assert that the button is disabled
expect(button).toBeDisabled();
expect(button).toHaveTextContent('Loading…');