> For the complete documentation index, see [llms.txt](https://alexhisen.gitbook.io/mobx-forms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alexhisen.gitbook.io/mobx-forms/mobx-schema-form/savebutton.md).

# SaveButton

SaveButton is a React Component which wraps React-Toolbox [Button](http://react-toolbox.com/#/components/button). By default, it passes primary = true and, prior to version 1.4.1, it always passed raised = true, *plus* flat = true when disabled. Now it sets raised = true when enabled and flat = true when disabled. However, you can always override all these props by explicitly setting them to true or false in SaveButton.

You can place it under the MobxSchemaForm. Clicking on it will validate the whole form and if there are no validation errors, model.save() will be called with the options provided to the SaveButton.

SaveButton supports the following props:

| prop               | Data type                                                | Description                                                                                                                                                                                                                                                                                                                                 |
| ------------------ | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| model              | [FormStore](/mobx-forms/formstore/formstore-overview.md) |                                                                                                                                                                                                                                                                                                                                             |
| options            | Object                                                   | Will be passed to model.[save](/mobx-forms/formstore/formstore-methods/formstore-save.md)()                                                                                                                                                                                                                                                 |
| onClick            | Function that takes React Event object                   | You can perform additional validation in this function and if you call preventDefault() on the Event object, SaveButton will not call validateAndSave()                                                                                                                                                                                     |
| onInvalid          | Function that takes React Event object                   | This function will be called if form failed validation and save() was not called.                                                                                                                                                                                                                                                           |
| onSave             | Function that takes React Event object                   | This function will be called when server response has been received to the save() request. Look at model.status.errors to see if there are any server errors.                                                                                                                                                                               |
| disableWhileSaving | Boolean                                                  | Defaults to true. Unless you set this to false, the DOM element for the button will have its disabled attribute set while model.save() is in progress. Because this happens at the lower DOM level, React may not re-set that attribute back to disabled if the disabled prop (passed to React-Toolbox button) becomes true after the save. |

> Any other properties are passed to React-Toolbox Button component.