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.
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 | error primary | primary | Background and foreground colors. |
edge | end start | 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 | small medium large | large | The size of the button when variant is set to "primary" or "secondary". |
variant | link primary secondary tertiary | 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 TESTSconst 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 LOADINGconst 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 disabledexpect(button).toBeDisabled();expect(button).toHaveTextContent('Loading…');