jQuery Mobile Framework

Navigation Search

Buttons API

Buttons are core widgets in jQuery Mobile and are used within a wide range of other plugins. The button markup is flexible and can be created from links or form buttons.

Basic markup

Use anchor links (a elements) to mark up navigation buttons, and input or button elements for form submission. By default, all buttons in the body content are styled as block-level elements so they fill the width of the screen:

Anchor

Inline

If you have multiple buttons that should sit side-by-side on the same line, add the data-inline="true" attribute to each button. This will style the buttons to be the width of their content so the buttons sit on the same line.

True False

Theme

Buttons can be manually assigned any of the button color swatches from the theme to add visual contrast with their container by adding the data-theme attribute on the button markup and specifying a swatch letter. When a link is added to a container, it is automatically assigned a theme swatch letter that matches its parent bar or content box to visually integrate the button into the parent container, like a chameleon.

A B C D E

Mini

For a more compact version that is useful in toolbars and tight spaces, add the data-mini="true" attribute to the button to create a mini version.

Cancel Place order

Icons

An icon can be added to a button by adding a data-icon attribute on the anchor specifying the icon to display.

Plus Minus Delete Arrow left Arrow right Arrow up Arrow down Check Gear Refresh Forward Back Grid Star Alert Info Home Search Bars Edit

Icon position

By default, all icons in buttons are placed to the left of the button text. This default may be overridden using the data-iconpos attribute to set the icon to the right, above (top) or below (bottom) the text. You can also create an icon-only button, by setting the data-iconpos attribute to notext. The button plugin will hide the text on-screen, but add it as a title attribute on the link to provide context for screen readers and devices that support tooltips.

Text only Left Right Top Bottom Icon only

Vertical group

To visually group a set of buttons to form a single block, wrap a set of buttons in a container with the data-role="controlgroup" attribute — the framework will create a vertical button group, remove all margins and drop shadows between the buttons, and only round the first and last buttons of the set to create the effect that they are grouped together.

Timeline Mentions Retweets

Horizontal group

By adding the data-type="horizontal" attribute to the controlgroup container, you can swap to a horizontal-style group that floats the buttons side-by-side and sets the width to only be large enough to fit the content.

Yes No Maybe

Mini horizontal grouped buttons, icon-only:

Add Delete More

Corners & shadows

There are options for controlling the rounded corners (data-corners), drop shadow (data-shadow), and icon shadow for the highlight under the icon disc (data-iconshadow).

Default No rounded corners No button shadow No icon disc shadow

Disabled

Form input or buttons can be disabled via the disabled attribute. Links styled like buttons have all the same visual options as true form-based buttons, but aren't part of the button plugin so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

Disabled anchor via class