The Button component
The Button component is a clickable button.
A button can be used to submit the form to the back-end or trigger other actions. To make a button trigger custom events in your form's guiEvent function, call the button's setEvent() method with a unique name for the new event. Note that the name of the event may not be a reserved Form.io event name, or you could get unintended behaviour or errors.
If the label is empty, the button becomes very thin. It is therefore advised to always have a non-empty label.
In addition to the properties and methods listed below, this component inherits properties and methods from the superclass Component. For example, any Button component has a label and tooltip property even though these are not explicitly listed here.
Properties
| Name | Description | Datatype | Default |
|---|---|---|---|
| size | Button size as defined by the Bootstrap documentation. Shall be one of xs, sm, md, lg, xl. | String | 'md' |
| leftIcon | The icon to place to the left of the button. This should be a FontAwesome font. Example: fa fa-plus. For an overview of available icons please refer to the FontAwesome website. | String | |
| rightIcon | The icon to place to the right of the button. This should be a FontAwesome font. Example: fa fa-plus | String | |
| block | Set to true to make the button the full width of the container instead of based on the text width. | Boolean | False |
| action | The action to execute when the button is clicked. One of the following:
| String | 'event' |
| event | The name of the event to trigger when the button is clicked. Most useful when action is set to event. | String | |
| custom | When action is set to custom, this is the JavaScript that will run when the button is clicked. | String | |
| disableOnInvalid | Whether to disable the button if the form is invalid. | Boolean | False |
| theme | Bootstrap-defined theme of the button. Can be primary, success, default etc. | String | 'primary' |
| showValidations | When the button is pressed, whether or not to display validation errors on the form. Ignored if the action is submit. | Boolean | False |
| tableView | When true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid. | Boolean | False |
Methods
| Name | Syntax | Description |
|---|---|---|
| setEvent | obj.setEvent(eventName) | Sets the action property to 'event' and the event property to eventName |
| setUpload | obj.setUpload(contentType) | When the button is clicked, a user can upload content of the specified type. The contentType must be a valid MIME type or a comma-separated list of extensions (e.g. .jpg,.png). After this method has been called on a Button, clicking the button triggers guiUpload instead of guiEvent. See guiUpload for more information. |