Add 'Cancel' button (or any custom button)

[ichavchavadze]

Is it possible to add an extra button? I need a 'cancel' button that will do Coloris.close(true);

[mdbassit]

You just need to set the closeButton option to true to display the close button. And if you want it to say "Cancel" instead of "Close" then change it with the closeLabel option.

[ichavchavadze]

You just need to set the closeButton option to true to display the close button. And if you want it to say "Cancel" instead of "Close" then change it with the closeLabel option.

But I want all three buttons at the same time - reset, cancel, close, is it possible?

[mdbassit]

It is not possible to have all three buttons out of the box, but you can add it yourself with a little Javascript and CSS. Try this:

Coloris.ready(() => {
  const picker = document.getElementById('clr-picker');
  const button = document.createElement('button');

  picker.appendChild(button);
  button.setAttribute('type', 'button');
  button.classList.add('clr-custom-reset');
  button.textContent = 'Reset';
  button.addEventListener('click', () => {
    Coloris.close(true);
  });
});

And to style the new button:

.clr-custom-reset {
  order: 2;
  height: 24px;
  margin: 0 20px 20px 0;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background-color: #666;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

[ichavchavadze]

Thanks! This is exactly what I wanted.

[JDMCreator]

If you want to add content over the color area, you will have to call Coloris.updatePosition() after.