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 gui_event 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

NameDescriptionDatatypeDefault
sizeButton size as defined by the Bootstrap documentation. Shall be one of xs, sm, md, lg, xl.String'md'
leftIconThe 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
rightIconThe icon to place to the right of the button. This should be a FontAwesome font. Example: fa fa-plusString
blockSet to true to make the button the full width of the container instead of based on the text width.BooleanFalse
actionThe action to execute when the button is clicked. One of the following:
  • submit: This button should trigger a form submission.
  • reset: This button should clear all form data.
  • event: A custom event that can be fired and handled with the gui_event described in the events section.
  • oauth: Trigger an OAuth login.
  • custom: Clicking the button shall trigger custom JavaScript.
String'event'
eventThe name of the event to trigger when the button is clicked. Most useful when action is set to event.String
customWhen action is set to custom, this is the JavaScript that will run when the button is clicked.String
disableOnInvalidWhether to disable the button if the form is invalid.BooleanFalse
themeBootstrap-defined theme of the button. Can be primary, success, default etc.String'primary'
showValidationsWhen the button is pressed, whether or not to display validation errors on the form. Ignored if the action is submit.BooleanFalse
tableViewWhen true and the component is part of an EditGrid, the component's value is shown (simplified) in the collapsed row of the EditGrid.BooleanFalse

Methods

NameSyntaxDescription
setEventobj​.setEvent(​eventName)Sets the action property to 'event' and the event property to eventName
setUploadobj​.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 gui_upload instead of gui_event. See gui_upload for more information.