Confirm

A confirm is used to present confirmation messages according to users’ actions.

Summary

1. Usage
2. Options
3. Size option

Usage

The confirm component is an empty container where you can add a message that will be presented to users so they can confirm or not the execution of an specific action.

You can initiate the component as a jQuery plugin:

Copy// using any selector
$('any-selector').on('click', () => $.fn.confirm(callback, options));

Or as a vanilla constructor:

Copyimport Confirm from 'garden/src/js/components/confirm';

new Confirm(callback, options);

The component takes a callback in the first argument and the options in the second argument.

Here’s an example on how to create a button to open a confirm window.

Options

These are the options provided with the confirm component, along with their default values.

Option	Default	Description
textMessage	This is an example message	A text to display in the confirm
textConfirmButton	Ok	A text to the confirm button
textCancelButton	Cancel	A text to the cancel button
size	"medium"	The modal size may vary between small, large, or medium

Below is an example on how to initialize the component passing customized options.

Copylet options = {
  textMessage: 'This is an example message',
  textConfirmButton: 'Ok',
  textCancelButton: 'Cancel'
}

const callback = (value) => value

// as a jquery plugin
$('[data-confirm]').on('click', () => $.fn.confirm(callback, options));

// as a vanilla constructor
new Confirm(callback, options);

Size option

As stated, a confirm has three predefined sizes: small, medium, or large. You can click on the buttons below to check each size option.

Copy$('[data-confirm]').on('click', () => $.fn.confirm((value) => value, { size: 'small|medium|large' }));