jQuery Mobile Button

Mobile applications are built on the convenience of touch operations.

Create buttons in jQuery Mobile

Buttons in jQuery Mobile can be created in three ways:

  • Use the <button> element
  • Use the <input> element
  • Use the <a> element with data-role="button"

<button>

<button>Button</button>

Try it yourself

<input>

<input type="button" value="Button">

Try it yourself

<a>

<a href="#" data-role="button">Button</a>

Try it yourself

Tip:Buttons in jQuery Mobile automatically receive styles, enhancing their interactivity and usability on mobile devices. We recommend using the <a> element with data-role="button" to create links between pages, while <input> or <button> elements are used for form submission.

Navigation button

To link pages through buttons, please use the <a> element with data-role="button":

Example

<a href="#pagetwo" data-role="button">Go to page two</a>

Try it yourself

Inline button

By default, buttons will occupy the full width of the screen. If you need buttons to adapt to their content, or if you need two or more buttons to be displayed side by side, please add data-inline="true":

Example

<a href="#pagetwo" data-role="button" data-inline="true">Go to page two</a>

Try it yourself

Grouped buttons

jQuery Mobile provides a simple method for grouping buttons.

Please use the data-role="controlgroup" attribute with data-type="horizontal|vertical" together to specify horizontal or vertical grouping of buttons:

Example

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Button 1</a>
  <a href="#anylink" data-role="button">Button 2</a>
  <a href="#anylink" data-role="button">Button 3</a>
</div>

Try it yourself

Tip:By default, grouped buttons are vertically aligned, with no external margin or spacing. And only the first and last buttons have rounded corners, creating a beautiful appearance after grouping.

Back button

To create a back button, please use the data-rel="back" attribute (the href value of the anchor will be ignored):

Example

<a href="#" data-role="button" data-rel="back">Return</a>

Try it yourself

More used for button data-* attributes

Attribute Value Description Example
data-corners true | false Specify whether the button has rounded corners. Test
data-mini true | false Specify whether it is a mini button. Test
data-shadow true | false Specify whether the button has a shadow. Test

For complete information about jQuery Mobile data-* attributes, please visit our jQuery Mobile Data Attributes Reference Manual.

The next section demonstrates how to add icons to buttons.