Buttons

Contact Us or call 1-877-932-8228
Buttons

Buttons

Simple inline text links can be a challenge for users on a mobile device. Buttons, easier to see and easier to tap, work better for most links. jQuery Mobile makes it easy to present a-tag links as buttons in a variety of styles.

To present a link as a button, simply add the class class="ui-btn" to the a tag:

<a href="#" class="ui-btn">Button</a>

You can style buttons as mini, presenting them slightly smaller, by adding the class ui-mini. Classes ui-corner-all and ui-shadow add rounded corners and a drop shadow, respectively, to the button. Adding class ui-btn-inline presents the button inline - just wide enough for its label text - rather than spanning the full width of its parent element.

Adding and positioning icons is quite easy: simply add the relevant class:

  1. ui-btn-icon-left
  2. ui-btn-icon-right
  3. ui-btn-icon-top
  4. ui-btn-icon-bottom

Class ui-btn-icon-notext presents the button with just the specified icon and no text label.

You can create and use your own custom icons; jQuery Mobile offers a set of stock icons:

jQuery Mobile Button Icons
Icon Code
action
alert
arrow-d
arrow-d-l
arrow-d-r
arrow-l
arrow-r
arrow-u
arrow-u-l
arrow-u-r
audio
back
bars
bullets
calendar
camera
carat-d
carat-l
carat-r
carat-u
check
clock
cloud
comment
delete
edit
eye
forbidden
forward
gear
grid
heart
home
info
location
lock
mail
minus
navigation
phone
plus
power
recycle
refresh
search
shop
star
tag
user
video

To style a link button with a given icon, use the corresonding class. For instance, a button with a "star" icon would be coded as follows:

<a href="#" class="ui-btn ui-btn-icon-left ui-icon-star">Button with Star</a>

where the star portion of the class ui-icon-star specifies the "star" icon.

As we mentioned above, buttons can display with no text (with class ui-btn-icon-notext) and display inline. Let's look at some examples of these features:

buttons

Code Sample:

GettingStartedjQuery/Demos/buttons/index.html

Code Explanation:

  1. The "Generic Button" is simply a link (an a tag) with class ui-btn.
  2. The "Mini Button" has class ui-mini, which causes the button to display with less top and bottom padding.
  3. The "Delete" button's class ui-icon-delete adds the stock jQuery Mobile "delete" icon, positioned at left.
  4. The "Search (bottom)" button presents the jQuery Mobile "search" icon; class ui-btn-icon-bottom positions the icon at bottom.
  5. The class ui-btn-icon-notext on the next button hides all label text, showing just a stock "home" icon.
  6. The two icons at bottom make use of the class ui-btn-inline attribute, preventing them from filling the horizontal width of the page; both are also "mini" because of the presence of class ui-mini

Grouped Buttons

Containing a set of buttons in a div element with the attribute data-role="controlgroup" groups the contained buttons visually, either stacked vertically (the default) or horizontally (with the additional attribute data-type="horizontal" on the container div):

grouped buttons

Code Sample:

GettingStartedjQuery/Demos/buttons/grouped.html

Code Explanation:

The first set of buttons stacks vertically because of the <div data-role="controlgroup"> wrapping the three buttons. The data-type="horizontal" on the second set of buttons aligns the buttons horizontally. The third set of buttons ("Left" and "Right") include appropriately labeled and positioned icons.

Next