jQuery Mobile - Buttons in toolbars


  • Links in the toolbars will be automatically enhanced by the framework as buttons with mini and inline style; however it has been deprecated in version 1.4.

  • The same applies for placing the buttons in header if they are immediate header's child.

  • To place your buttons left or right in the header you can use ui-btn-left and ui-btn-right respectively.

  • The heading has some margin which provides the header bar its height. If you do not require the heading for your page, then add an element with class = "ui-title".


Following example demonstrates the use of buttons in toolbars in jQuery Mobile.

<!DOCTYPE html>
      <title>Buttons in toolbars</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

      <div data-role = "header">
         <a href = "#" class = "ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Options</a>
         <button class = "ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
         <span class = "ui-title"></span>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as toolbar_buttons.html file in your server root folder.

  • Open this HTML file as http://localhost/toolbar_buttons.html and the following output will be displayed.

Buttons can also be used in footers. For more information click here.

Kickstart Your Career

Get certified by completing the course

Get Started