Skip to content

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
  • 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
NameTypeDefaultDescription
after  ReactNodeContent shown after children.
before  ReactNodeContent shown before the children.
children  ReactNodeThe content of the Link.
color  errorprimaryprimaryBackground and foreground colors.
edge  endstartAligns 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  booleanIf true, a loading indicator will be shown. See SubmitButton for a ready-made component.
size  smallmediumlargelargeThe size of the button when variant is set to "primary" or "secondary".
variant  linkprimarysecondarytertiaryprimaryDetermines 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…');