Skip to main content

Search and Top Navigation

#6830 closed feature (fixed)

Opened January 11, 2011 02:53PM UTC

Closed November 26, 2012 09:30AM UTC

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.

Attachments (0)
Change History (15)

Changed January 11, 2011 02:57PM UTC by mjpowersjr comment:1

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:

Changed January 11, 2011 03:36PM UTC by scottgonzalez comment:2

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.

Changed January 11, 2011 03:39PM UTC by scottgonzalez comment:3

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.

Changed January 11, 2011 04:18PM UTC by scottgonzalez comment:4

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.

Changed February 15, 2011 02:23AM UTC by brian123zx comment:5

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.

Changed February 15, 2011 03:45AM UTC by scottgonzalez comment:6

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.

Changed March 29, 2011 06:43AM UTC by feugy comment:7


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 !


Changed April 13, 2011 07:51PM UTC by dracos comment:8

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


Changed June 17, 2011 08:08AM UTC by marcelklomp comment:9

Replying to [comment:8 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


Changed August 02, 2011 11:13PM UTC by scottgonzalez comment:10

#7598 is a duplicate of this ticket.

Changed August 05, 2011 07:13PM UTC by David.Sullivan comment:11

I went ahead and submitted a pull request of this.


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'


Changed January 30, 2012 09:25PM UTC by David.Sullivan comment:12

I put together a demo of this functionality here.

Changed June 26, 2012 01:22AM UTC by scottgonzalez comment:13

type: enhancementfeature

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:14


Changed November 26, 2012 09:30AM UTC by Jörn Zaefferer comment:15

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