Understanding jQuery UI Button Widget

Question

Im looking to recreate the following button after updating to the latest version (button widget was rewritten in 1.12 onwards, However im struggling to get the syntax/classes correct based of the api documentation here: https://api.jqueryui.com/button/

button should look like

but so far the closest I've got is

the code used to display the above is as follows

<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>


    $("#btnAddNew").button({
    classes: {
        "ui-button": "ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary"
    },
    icons: {
        primary: "ui-icon-plus"
    },
    label: "New"
});

Can anyone point to where im going wrong?

Answer 1

This seems to work without issue using Cupertino theme. I suspect that CSS is not loading for your script. I would check to ensure it's not getting 404 error or that no other Styling is conflicting.

$(function() {
  $("#btnAddNew").button({
    icons: {
      primary: "ui-icon-plus"
    },
    label: "New"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button id="btnAddNew" type="button" title="New User Access" role="button" aria-disabled="false"></button>