Buttons are an indispensable part of mobile apps. Different styles of apps require different button styles. By default, the button display style is: **display: inline-block**. Default button-light button-stable button-positive button-calm button-balanced button-energized button-assertive button-royal button-dark [Try it »](#) The button-block style button displays as: **display: block**, it will completely fill the width of the parent element, including the padding property. Block Button [Try it »](#) Using the button-full class, you can make the button display at full width, without including padding. Full Width Block Button [Try it »](#) * * * ## Buttons of Different Sizes button-large sets a large button, button-small sets a small button. Small Button Large Button [Try it »](#) * * * ## Outline Button button-outline sets a transparent background. Outlined Button [Try it »](#) * * * ## Clear Button button-clear sets a transparent background for the button, with no border. Clear Button [Try it »](#) * * * ## Icon Buttons We can add icons to buttons. HomeFavoritesLearn MoreBackReorder [Try it »](#) * * * ## Adding Buttons to Header/Footer Buttons can be added to the header/footer. The button style is set according to the header/footer, so you don't need to add extra styles to the button. [Try it »](#) The button-clear class can be used to set header/footer buttons with no background and border. [Try it »](#) * * * ## Button Bar We can use the button-bar class to set up a button bar. In the following example, we add a button bar to the header and content. [Try it »](#)