Button

The button component shows on the screen a control that you can use to generate an action event when it is pressed and released.
The component is coded with standard HTML anchor and input elements.

photo of button element in Tizen

The following table describes the supported button classes.

Table: Button type classes
Class Description
ui-btn Creates the element as a button component.
ui-btn-icon

Creates an icon button.

To use the icon button, add this class to the button element. To insert a custom icon, use the following code:

<div class="ui-grid-row">
   <button type="button" class="ui-btn ui-btn-icon"
           style="background-image: url(images/00_icon_back_ef.png);">
      Button Icon
   </button>
</div>

The Tizen wearable Web UI framework does not provide styles for an icon with text.
ui-inline Creates an inline button.
ui-multiline Creates a multi-line text button.

To add a button component to the application, use the following code. You can use the disabled attribute to disable a button and prevent the user from clicking it.
And it is highly recomeneded to add these button in the content area and footer area, not header.

<button type="button" class="ui-btn">Button</button>
<a href="#" class="ui-btn">Button</a>
<input type="button" class="ui-btn" value="Button"/>

<!--Inline button-->
<input type="button" class="ui-btn ui-inline" value="Button"/>

<!--Multi-line text button-->
<a href="#" class="ui-btn ui-multiline ui-inline">A Button<br/>Icon</a>

<!--Disabled button-->
<button type="button" class="ui-btn" disabled="disabled">Button disabled</button>

Button Color Themes

The following table lists the supported button color classes.

Table: Button color classes
Class Default button color Pressed button color Disabled button color
ui-color-red #ce2302 #dd654e #3d0a0a
ui-color-orange #ed8600 #f0aa56 #462805
ui-color-green #64a323 #92be5e #1e3108

Button Groups

You can group buttons in columns or rows. The following table lists the supported button column and row classes.

Table: Button group classes
Class Description
ui-grid-col-1 Defines the button column width as 100% of the screen.
ui-grid-col-2 Defines the button column width as 50% of the screen.
ui-grid-col-3 Defines the button column width as 33% of the screen.
ui-grid-row Arranges the buttons in a row.

To implement the button groups, use the following code:

  • For columns:

    <div class="ui-grid-col-3" style="height:76px">
   <button type="button" class="ui-btn">Button Circle</button>
   <a href="#" class="ui-btn ui-color-red">A Button Circle</a>
   <input type="button" class="ui-btn ui-color-orange" value="Input Button Circle"/>
</div>

  • For rows:

    <div class="ui-grid-row">
   <button type="button" class="ui-btn">Button Circle</button>
   <a href="#" class="ui-btn ui-color-red">A Button Circle</a>
   <input type="button" class="ui-btn ui-color-orange" value="Input Button Circle"/>
</div>