#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# 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