어린왕자와 여우

버튼은 A테그나 INPUT테그 둘 다 동일하게 버튼으로 적용된다.
기본적으로 아래와 같이 data-role로 button을 지정할 수 있다.

<a href="#detail" data-role="button">OK</a>
<input type="button" value="OK" />

버튼에 아이콘을 지정하려면 data-icon을 사용하면 되며 아이콘의 위치는 data-iconpos로 지정할 수 있다.

<a href="#detail" data-role="button" data-icon="check" data-iconpos="right">OK</a>

또한, 아이콘으로만 된 버튼을 만들려면 data-iconpos를 notext로 지정하면 된다.

<a href="#detail" data-role="button" data-icon="check" data-iconpos="notext"></a>


버튼들끼리 붙은 형식의 UI를 구현하려면 controlgroup을 사용하면 된다.

<div data-role="controlgroup" data-type="horizontal">
    <a href="#detail" data-role="button">OK1</a>
    <a href="#detail" data-role="button">OK2</a>
</div>


CSS특성으로 스타일을 상속받아 버튼을 customize할 수 있으며, 리스트와 마찬가지로 theme지정도 가능하다.
 

<style type="text/css">
    .ui-icon-red {
        ...
    }
</style>

<a href="#" data-role="button" data-icon="red" data-theme="b">OK</a>