jQuery UI Dialog Button Icons

Question

Is it possible to add icons to the buttons on a jQuery UI Dialog? I've tried doing it this way:

$("#DeleteDialog").dialog({
    resizable: false,
    height:150,
    modal: true,
    buttons: {
        'Delete': function() {
            /* Do stuff */
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    },
    open: function() {
        $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('ui-icon-cancel');
        $('.ui-dialog-buttonpane').find('button:contains("Delete")').addClass('ui-icon-trash');
    }
});

The selectors in the open function seem to be working fine. If I add the following to "open":

$('.ui-dialog-buttonpane').find('button:contains("Delete")').css('color', 'red');

then I do get a Delete button with red text. That's not bad, but I'd really like that little trash can sprite on the Delete button as well.

Edit:

I made a pair of tweaks to the accepted answer:

var btnDelete = $('.ui-dialog-buttonpane').find('button:contains("Delete")');
btnDelete.prepend('<span style="float:left; margin-top: 5px;" class="ui-icon ui-icon-trash"></span>');
btnDelete.width(btnDelete.width() + 25);

Adding some top margin pushes the icon down, so it looks like it's centred vertically. Adding 25 px to the button's width keeps the button text from wrapping onto a second line.

Majoriemajority

This was finally fixed 3 months ago in bugs.jqueryui.com/ticket/6830 – Asquith

Answer 1

Try this line to add the trash icon to the delete button. The sprite has to be in a separate element.

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

In order to prevent the icon from appearing on the top of the button:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');

Boyse

Nice. That gets the sprite onto the button, but it also doubles the height of the button, leaving the sprite in the top-left corner. – Majoriemajority

Ah, nevermind, a call to .width() gives the icon some room and prevents the button text from wrapping onto a second line. – Majoriemajority

Not the best answer now. – Nonpareil

Answer 2

i' tried this, and it works :)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]

Cranberry

this doesn't work if u have a localized website :), or it gets more complicated as "cancel" becomes a variable – Muslim

instead of 'button:contains("Cancel")', use ``button:first-child'` and chain in with .next() for the next button – Rimarimas

Answer 3

Natively supported since jQuery UI 1.10

Starting from jQuery UI version 1.10.0, it is possible to cleanly specify button icons without resorting to open event handlers. The syntax is:

buttons: [
    {
        text: "OK",
        icons: { primary: "ui-icon-check" }
    },
    {
        text: "Cancel",
        icons: { primary: "ui-icon-closethick" }
    }
]

It is also possible to specify a secondary icon.

See it in action.

Herrin

@Elaine: You can't set its CSS class this way. If you need to do so you still have to do it with an open event handler. But perhaps it is possible to target the button based on its ancestors in the DOM or to target the .ui-button-text element inside it (which you can do due to the class set by the icon) instead? Depends on the particulars. – Herrin

@Elaine: I 'm not sure what works exactly, because a) the API documentation doesn't mention anything like that, b) the source code doesn't seem to have anything related to that (I just checked) and c) I just made a quick attempt and it didn't work (nothing got the class). Can you post an example on JSFiddle? – Herrin

Answer 4

also you can add id or other attr to button, like this:

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }

Olio

why? still works fine for me and it's better than select button by caption – Olio

it's going to be implemented in jQ UI 1.9 – Muslim

@lonut Checking the 1.9 source don't see this being implemented. Also see bugs.jqueryui.com/ticket/6830 – Radiancy

Answer 5

This version works without having to worry about the text in the buttons

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

Cell

Answer 6

Here is what I use. Assign an ID to the button of interest during the initial dialog definition:

    buttons:
    [
        {
            id: "canxButton",
            text: "Cancel",
            icons: {
                primary: "ui-icon-cancel"
            },
            click: function () { ...

Then you can change text/icon like this:

$("#canxButton").button("option", "label", "Done");
$("#canxButton").button({ icons: {primary: "ui-icon-close"} });

Addition

Answer 7

assign height to ".ui-dialog .ui-button" like as following:

.ui-dialog .ui-button {
    height:36px;
}
.ui-icon-kl_exit {
    height:32px; 
    width:32px;
    display:block;
    background-image: url('../icons/exit32.ico');
}

Gerbil

Answer 8

Just an update since I came across the need to do this myself.

I have multiple dialogs that both have the same close button so it's useful to talk about how one would place icons directly on the dialog you're looking to affect, just in case you would want an icon on a button in a different dialog that contains the same text.

Also the selected solution is actually missing a couple of already-defined CSS classes that would fix the positional issue.

The following code should accomplish exactly what was desired in the original question, with a little more precision. If you wanted to apply the same trash icon to all dialogs with a Delete button, changing the $('#DeleteDialog').parent() selector to $('.ui-dialog-buttonpane') would accomplish that goal:

$('#DeleteDialog').parent()
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary ui-button-text-icon')
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-trash"></span>');

Emotional

Answer 9

Or if you don't want to affect any other dialogs,

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

Mascarenas

Answer 10

I ran in the same issue. It seems jquery stores the text in an attribute called "text" in the button itself, and not as text inside the button.

I solved it like this:

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });

Struthious

Thank you for the tip. It's really helpful for me :) – Mike

Answer 11

How about a class-based approach?

In your _layout.cshtml file put something like the following:

<script type="text/javascript">
    $(function () {
        stylizeButtons();
    }

function stylizeButtons(parent) {
    if (parent == undefined) {
        parent = $("body");
    }
    // Buttons with icons
    $(parent).find(".my-button-add").button({ icons: { primary: "ui-icon-plusthick"} });
    $(parent).find(".my-button-cancel").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-delete").button({ icons: { primary: "ui-icon-closethick"} });
    $(parent).find(".my-button-submit").button({ icons: { primary: "ui-icon-check"} });
    $(parent).find(".my-button-export").button({ icons: { primary: "ui-icon-suitcase"} });
    $(parent).find(".my-button-search").button({ icons: { primary: "ui-icon-search"} });
    $(parent).find(".my-button-editicon").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-edit").button({ icons: { primary: "ui-icon-pencil"} });
    $(parent).find(".my-button-back").button({ icons: { primary: "ui-icon-arrowthick-1-w"} });
    $(parent).find(".my-button-previous").button({ icons: { primary: "ui-icon-carat-1-w"} });
    $(parent).find(".my-button-next").button({ icons: { primary: "ui-icon-carat-1-e"} });
    $(parent).find(".my-button-history").button({ icons: { primary: "ui-icon-bookmark"} });
    $(parent).find(".my-button-reports").button({ icons: { primary: "ui-icon-calculator"} });
}
</script>

Then, in the file where you are creating the dialog, do something like this:

$("#doStuff-dialog").dialog({
    title: "Do Some Stuff",
    modal: true,
    buttons: [
        {
            text: "Yes",
            class: "my-button-submit",
            click: function () {
                $(this).dialog("close");
            }
        },
        {
            text: "No",
            class: "my-button-cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
    ],
    open: function () {
        stylizeButtons($("#doStuff-dialog").parent());
    }
});

Then you never have to rely on searching for text, and it requires a minimal amount of code in your dialog. I use this throughout my applications to apply jquery UI styling/icons to buttons just by giving them a class.

Fleabane

Answer 12

According to Dialog > buttons option documentation you can pass an object or an array of options; the latter allows you to customize the buttons:

buttons

Type: Object or Array
Default: []

Multiple types supported:

• Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
• Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button. In addition, a key of icons can be used to control button's icons option, and a key of showText can be used to control button's text option.

$(function() {
  var buttons = [];
  buttons.push({
    text: "Yes",
    // icon options
    icons: { primary: "ui-icon-check" },
    // attributes
    "class": "hawt-button",
    title: "Aye!"
  });
  buttons.push({
    text: "Yes to All",
    icons: { secondary: "ui-icon-check" }
  });
  buttons.push({
    text: "Please",
    icons: { primary: "ui-icon-notice" },
    // text options
    showText: false
  });
  buttons.push({
    text: "Cancel",
    icons: { secondary: "ui-icon-close" },
    // properties
    disabled: true
  });
  $("#dialog").dialog({
    width: "auto",
    buttons: buttons
  });
});

@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");

.ui-button.hawt-button {
  color: hotpink;
}

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog" title="Confirmation">
  <p>Delete all files from your hard drive?</p>
</div>

Retroact

Answer 13

On open method add custom icon like this:

$dialog.dialog({
    resizable:false,
    draggable:false,
    modal:true,
    open:function (event, ui) {
        $(this).parents('.ui-dialog').find('.cancel.ui-button')
            .prepend('<i class="far fa-window-close"></i><span>&nbsp;&nbsp; 
                   </span>');
    },

"far fa-window-close" is bootstrap awesome icon

Ichor