Opened 6 years ago

Closed 4 years ago

#6830 closed feature (fixed)

Allow Icons to be specified for Dialog buttons

Reported by: mjpowersjr Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8.7
Keywords: Cc:
Blocked by: Blocking:


When defining buttons for a new Dialog widget, you can easily add buttons to the dialog, by adding something like this:

  buttons {
    Cancel : function() {...},
    DoSomething: function() {...},

It would be really handy if you could specify icons to be used with the buttons. I'm not sure what the best way to do this would be, but maybe you could pass in an array of button objects ?

Or maybe somethings like this:

  buttons {
    Cancel : { icon: 'ui-primary-trash', callback: someCallback }

I'm not really sure what the best implementation would be, but it would be a nice feature to have. It seems like it should be pretty straightforward, as the Dialog widget makes use of the Button widget.

Change History (15)

comment:1 Changed 6 years ago by mjpowersjr

Just a quick update, you can achieve this without modifications to jQuery, but it does require some work:

  var dialog = $(...).dialog(...);
    .prepend('<span class="ui-button-icon-primary ui-icon ui-icon-close"></span>");

It seems that at least a few other people have wanted the same feature:

comment:2 Changed 6 years ago by Scott González

Wow, you should definitely not do that. If you're going to manually change the state of a button, use button's public API, don't manually modify it's state.

comment:3 Changed 6 years ago by Scott González

Status: newopen

If you want this level of control, you should definitely be using the array format for buttons, not the simplified hash format. I could see whitelisting the icons property to be passed along to the button widget. If we're going to proxy the icons, we should really proxy every button option though. This is tricky because the text property and button's text option have completely different meanings.

comment:4 Changed 6 years ago by Scott González

Maybe we can proxy icons and update button to treat an empty label the same as text: false. That would expose the majority of the button API without explicitly exposing the button API. The only thing missing would be the ability to specify text but have it hidden.

comment:5 Changed 6 years ago by brian123zx

Hi, I'm new to the jQuery UI development side of things. I'd like to work on this ticket. I read the bugfixing guide but don't see how to assign this ticket to my name. I'd go with what was said previously about proxying the icons property, but I'd say add another property for controlling the display of the text, possibly called showText:true|false. That would allow the buttons to maintain accessibility and allow for most control.

$( ".selector" ).dialog({ buttons: [
        text: "Ok",
        click: function() { $(this).dialog("close"); },
] });

How do I go about assigning this ticket to myself? I've already forked the project in github and familiarized myself with that.

comment:6 Changed 6 years ago by Scott González

Brian, I think your proposal makes sense. Can you please post your proposed API on the Developing jQuery UI forum for feedback?

As for assigning the ticket to yourself, that's not something that you can do. The bug fixing guide needs to be updated to remove the section about ticket assignments as that was written a long time ago when the guide was only meant for team members.

comment:7 Changed 6 years ago by feugy


I fixed this on my own jQuery-ui dialog (v1.8.11), simply by replacing a line in the _createButtons() method: dialog.js, line 385




if icons are specified in the way brian123zx explained, they will be displayed. If no icons are specified, or if the "simple" way to specify buttons is used, no icons are displayed.

Enjoy !


comment:8 Changed 6 years ago by dracos

For those wanting to implement feugy's change directly in jquery-ui.min.js (1.8.11), it goes at line 343, about character 191, within this statement:


Which becomes


comment:9 in reply to:  8 Changed 6 years ago by marcelklomp

Replying to dracos: And if you want to implement feugy's change in jquery-ui.min.js (1.8.13), it goes at line 386, character 297:


Which becomes


comment:10 Changed 6 years ago by Scott González

#7598 is a duplicate of this ticket.

comment:11 in reply to:  5 ; Changed 6 years ago by David.Sullivan

I went ahead and submitted a pull request of this. Demo:

Think it covers all the bases.

$(document).ready(function() {
        buttons: [
            text: 'Icon Only',
            showText: false,
            icons: {
                    primary: 'ui-icon-disk'
           {text: 'Primary',
            icons: {
                    primary: 'ui-icon-trash'
            {text: '2ndary',
            icons: {
                    secondary: 'ui-icon-plus'
            {text: 'Both',
            icons: {
                   primary: 'ui-icon-trash', secondary: 'ui-icon-plus'


comment:12 in reply to:  11 Changed 5 years ago by David.Sullivan

I put together a demo of this functionality here.

comment:13 Changed 5 years ago by Scott González

Type: enhancementfeature

comment:14 Changed 5 years ago by Scott González


comment:15 Changed 4 years ago by Jörn Zaefferer

Resolution: fixed
Status: openclosed

Dialog: Pass through icons and showText (as 'text') options to button. Fixes #6830 - Allow Icons to be specified for Dialog buttons.

Changeset: 999617343f7b813dc1c8d9c9048489e4d99d0470

Note: See TracTickets for help on using tickets.