jQuery UI: Dialog button styling

css, html, jquery, jquery-ui

Solution

I can see its pretty old question but you can do it now in much nicer way in jQuery UI, just add 'class' or 'style' properties to button object like this:

$("#id-dialog").dialog({
    modal: true,
    buttons: [
        { text: "Save", click: function () { alert("save"); }, class:"sampleClass1", style:"color:Red" },
        { text: "Cancel", click: function () { alert("close"); ;}, class:"sampleClass2"}
    ]
});

Problem

Is there an easy way to apply CSS/icons to the modal buttons on a jQuery UI modal dialog box? If I include the HTML to display an icon with the button text, it shows the HTML as text rather than rendering the code. I'm guessing I could write some jQuery to find the button and overwrite the HTML with what I want, but I'm hoping there's an easier more direct way.

Original source