Search within TutorialsPark

jQuery UI : Buttons


Learn how to use jQuery UI to create and manage Buttons


jQuery UI : Creating Buttons

The jQuery UI button widget is used to apply themes to buttons and a element.

It applies the shape , font , size and color to the element based on the theme of the jQuery UI.Simply, select the element you want to transform , jQuery UI takes care of all other things.

Example: jQuery UI - Creating buttons using jQuery UI

Give it a TRY! » Note: There are two buttons, one using jQuery UI styles while the other button has no styles.


jQuery UI : Configuring the Button

Table : Setting Properties for jQuery UI Buttons

Property Description Default Value
disabled To Disable the button Instance false
icons To set the icons for the buttons primary: null
secondary: null
label To set the text associated with the button The content of the element or the value attribute
text It hides the text of the button when using an icon-only instance. true

jQuery UI gives you an option to configure the buttons by using the settings properties.These features allows you to exercise control over how the button is created and displayed.

The setting can be applied in two ways, by using a map object and second by calling the button method with its arguments.

In the second method, the first argument is the option , the second argument is the setting you want to assign, the third argument is the value of the property.

Syntax: jQuery UI - Button Configuration

Example: jQuery UI - Button Configuratiion

Give it a TRY! » Note:The button is first disabled and then enabled using the map and argument method respectively.


jQuery UI: Using the Options Argument with the Map Object

In this demo we extend the previous example, here we first read the value of the setting and then display it.

Example: jQuery UI - Get values using Button Options.

Give it a TRY! » Note: The first argument is option and the second is the setting whose value is to be retrieved.


jQuery UI : Button Icons

jQuery UI themes provides a comprehensive set of icons which can be brought into use for almost all purposes.

The icon setting is used to specify the icons to be displayed, there are two position within the button widget for icons.

The primary icon is displayed on the left side of the text, whereas the secondary icon is displayed to the right of the text.

List of all icons can be seen here

Example: jQuery UI Button Icons

Give it a TRY! » Note: By setting the value of text to false, no text will be displayed on the button .


jQuery UI : Button with Custom Image

jQuery UI icons are small in size, hence at time it won't suit the project requirement.To overcome that you can use a custom image as icon as well.

Use an img element within the button element, as long as the image has a transparent background jQuery UI button widget will take care of the content within it.

Example: jQuery UI - Button with Custom Image

Give it a TRY! » Note:The append method is used to attach the image and button method is used to create the jQuery UI button.