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 Icon action
Alert Icon alert
Arrow-D Icon arrow-d
Arrow-D-L Icon arrow-d-l
Arrow-D-R Icon arrow-d-r
Arrow-L Icon arrow-l
Arrow-R Icon arrow-r
Arrow-U Icon arrow-u
Arrow-U-L Icon arrow-u-l
Arrow-U-R Icon arrow-u-r
Audio Icon audio
Back Icon back
Bars Icon bars
Bullets Icon bullets
Calendar Icon calendar
Camera Icon camera
Carat-D Icon carat-d
Carat-L Icon carat-l
Carat-R Icon carat-r
Carat-U Icon carat-u
Check Icon check
Clock Icon clock
Cloud Icon cloud
Comment Icon comment
Delete Icon delete
Edit Icon edit
Eye Icon eye
Forbidden Icon forbidden
Forward Icon forward
Gear Icon gear
Grid Icon grid
Heart Icon heart
Home Icon home
Info Icon info
Location Icon location
Lock Icon lock
Mail Icon mail
Minus Icon minus
Navigation Icon navigation
Phone Icon phone
Plus Icon plus
Power Icon power
Recycle Icon recycle
Refresh Icon refresh
Search Icon search
Shop Icon shop
Star Icon star
Tag Icon tag
User Icon user
Video Icon 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