jQuery Mobile Docs - Button types

# Button basics

Home Search

## Button basics

- Basics
- Options
- Methods
- Events

Buttons are coded with standard HTML anchor and input elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device. Use anchor links (`a` elements) to mark up navigation buttons, and `input` or `button` elements for form submission.

View the data- attribute reference to see all the possible attributes for buttons including adding icons or displaying them inline or grouped.

## Styling links as buttons

In the main content block of a page, you can style any anchor link as a button by adding the `data-role="button"` attribute. The framework will enhance the link with markup and classes to style the link as a button. For example, this markup:

`<a href="index.html" data-role="button">Link button</a>`

Produces this link-based button:

Link button

Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the `button` plugin and only just use the underlying `buttonMarkup` plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

`<a href="index.html" data-role="button" class="ui-disabled">Link button</a>`

Produces this disabled link-based button:

Link button

## Mini version

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.

    <a href="index.html" data-role="button" data-mini="true">Link button</a>

This will produce a button that is not as tall as the standard version and has a smaller text size.

Link button

## Form buttons

For ease of styling, the framework automatically converts any `button` or `input` element with a `type` of `submit`, `reset`, or `button` into a custom styled button — there is no need to add the `data-role="button"` attribute. However, if needed, you can directly call the button plugin on any selector, just like any jQuery plugin:

`$('[type="submit"]').button();`

To preserve events bound to the original `button` or `input`, the framework hides the original element by making it transparent and positioning it over the new button markup. When a user clicks on the custom-styled button, they're actually clicking on the original element. To prevent a form button from being converted into an enhanced button, add the `data-role="none"` attribute and the native control will be rendered.

Button based button:

    <button>Button element</button>

Input type="button" based button:

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

Input type="submit" based button:

    <input type="submit" value="Submit Button" />

Input type="reset" based button:

    <input type="reset" value="Reset Button" />

### More in this section

- Buttons
- Button basics
- Button icons
- Inline buttons
- Grouped buttons
- Theming buttons