How to style custom elements to match the ArcGIS widgets?

Question

Using the ArcGIS Server v4 JavaScript API, the instructions for creating a custom widget are very complex.

In my case I simply need to add some custom buttons, and style them to match the existing widgets, so these instructions are overkill.

Is there a simple way to style buttons to match the out-of-the-box widgets?

Answer 1

It turns out to be quite a simple matter to insert a custom button into the DOM, and style it to match the other widgets. I used jQuery but standard JavaScript may also work:

var btnHtml = '<div class="esri-component esri-widget">';
btnHtml += '<div id="btnCustom" class="esri-widget--button esri-widget esri-interactive" role="button" title="My Custom Button">';
btnHtml += '<span aria-hidden="true" role="presentation" class="esri-icon esri-icon-map-pin"></span>';
btnHtml += '<span class="esri-icon-font-fallback-text">Custom Button</span></div></div>';
$(".esri-ui-top-left").append(btnHtml);

$("#btnCustom").click(function(){
  alert("Clicked the custom button");
})

In this example the button is appended to the esri-ui-top-left section, which adds it below the existing zoom widget.

See the live demo at https://codepen.io/slead/pen/zyjOpm