Button

new Button(options) → {this}

A button component that returns an instance method and event api.

Parameters:
NameTypeDescription
optionsobject

The options object for the class.

Properties
NameTypeDescription
activeTextstring

If interactive, what is the active text when the button is active?

activeTypestring

What is the active type? Supports loading currently.

attributesstring

Arbitrary attributes for the button.

customClassesArray

Custom classes for the button.

disableWhileActiveboolean

If interactive, disable the button while active?

htmlstring

Arbitrary html to append inside the button.

iconstring

Icon name if wishing to use an icon button.

iconPositionstring

Icon position if using one. leading or trailing.

idstring

Id for the button.

interactiveboolean

Is the button interactive? If true the button has two states it transitions, set by activeType.

interactiveOnClickboolean

If interactive, does clicking the button swap the active state and fire the callbacks?

labelstring

The label for the button. If interactive, the text displayed when inactive.

loaderOptionsobject

All valid options for the loader component if using an interactive loader button.

Properties
NameTypeDescription
additionalClassesstring

Additional classes for the loader element.

backgroundstring

Background color for the loader.

foregroundstring

The color of the loader.

maskboolean

Should the loader mask an area?

showOnRenderboolean

Visible on render?

sizenumber

Size of the loader, decimal int values.

lockSizeboolean

If interactive, lock the width of the button when transitioning states?

onActivefunction

If interactive, a callback to fire when button goes into its active state.

onInactivefunction

If interactive, a callback to fire when button goes into its inactive state.

renderedboolean

Is this button already rendered in the dom, eg by php?

renderOnInitboolean

Render this button on init?

roundboolean

Does the button have round corners?

sizestring

Size of the button.

spacingstring | number | Array | object

The spacing for the component, string, number, object or array.

targetstring

The target to render to. Any valid css selector string.

typestring

The button type.

Since
  • 1.0.5
Source
Returns:
Type: 
this
Example
import Button from '@gravityforms/components/html/admin/elements/Button';

function Example() {
     const buttonInstance = new Button( {
         id: 'example-button',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
         theme: 'cosmos',
     } );

     // Some time later we can render it. This is only done if we set renderOnInit to false.
     // If true it will render on initialization.
     buttonInstance.init();
}

Methods

(static) activateButton() → {void}

If interactive, handles activating this button and swapping the ui state, plus executing any callbacks and firing useful events.

Since
  • 1.0.5
Source
Fires:
Returns:
Type: 
void

(static) bindEvents() → {void}

Bind event handles for the button instance.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) buttonTemplate(options) → {string}

The template function used to generate our button html.

Parameters:
NameTypeDescription
optionsobject

The options object for the class.

Properties
NameTypeDescription
activeTextstring

If interactive, what is the active text when the button is active?

activeTypestring

What is the active type? Supports loading currently.

attributesstring

Arbitrary attributes for the button.

customClassesArray

Custom classes for the button.

htmlstring

Arbitrary html to append inside the button.

iconstring

Icon name if wishing to use an icon button.

iconPositionstring

Icon position if using one. leading or trailing.

idstring

Id for the button.

interactiveboolean

Is the button interactive? If true the button has two states it transitions, set by activeType.

labelstring

The label for the button. If interactive, the text displayed when inactive.

roundboolean

Does the button have round corners?

sizestring

Size of the button.

spacingstring | number | Array | object

The spacing for the component, string, number, object or array.

typestring

The button type.

Since
  • 1.0.5
Source
Returns:

The button html.

Type: 
string
Example
import { buttonTemplate } from '@gravityforms/components/html/admin/elements/Button';

function Example() {
     const buttonHTML = buttonTemplate( options );
     document.body.insertAdjacentHTML( 'beforeend', buttonHTML );
}

(static) deactivateButton() → {void}

If interactive, handles deactivating this button and swapping the ui state, plus executing any callbacks and firing useful events.

Since
  • 1.0.5
Source
Fires:
Returns:
Type: 
void

(static) handleButtonClick() → {void}

If interactive and button is not active, activate it.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) init() → {void}

Initialize the component.

Since
  • 1.1.16
Source
Fires:
Returns:
Type: 
void

(static) render() → {void}

Renders the component into the dom.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) renderInteractive() → {void}

If interactive render the elements that are present on active state.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) storeElements() → {void}

Stores useful HTMLElements on the instance in the elements namespace after render

Since
  • 1.1.16
Source
Returns:
Type: 
void