1# button
2
3
4The **\<button>** component includes capsule, circle, and text buttons.
5
6> **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
18
19| Name| Type| Default Value| Mandatory| Description|
20| -------- | -------- | -------- | -------- | -------- |
21| type | string | capsule | No| Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated. If this attribute is not set, a capsule-like button is displayed. Unlike the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. Available button types are as follows:<br>- **capsule**: capsule button with fillets, background color, and text.<br>- **circle**: circle button that can accommodate icons.<br>- **text**: text button, which displays only text.|
22| value | string | - | No| Text value of the button. This attribute is unavailable for circle buttons.|
23| icon | string | - | No| Path of the button icon. The supported icon formats are JPG, PNG, and SVG.|
24| placement | string | end | No| Position of the button icon in text. This attribute is valid only when **type** is not set. Available values are as follows:<br>- **start**: The button icon is at the beginning of the text.<br>- **end**: The button icon is at the end of the text.<br>- **top**: The button icon is at the top of the text.<br>- **bottom**: The button icon is at the bottom of the text.|
25| waiting | boolean | false | No| Whether the button is in waiting state. The value **true** means that the button is in waiting state, and a loading animation is displayed on the left of the text.|
26
27
28## Events
29
30The [universal events](js-service-widget-common-events.md) are supported.
31
32
33## Styles
34
35In addition to the [universal styles](js-service-widget-common-styles.md), the following styles are supported.
36
37| Name| Type| Default Value| Mandatory| Description|
38| -------- | -------- | -------- | -------- | -------- |
39| text-color | &lt;color&gt; | - | No| Text color of the button.|
40| font-size | &lt;length&gt; | - | No| Font size of the button.|
41| font-style | string | normal | No| Font style of the button.|
42| font-weight | number \| string | normal | No| Font weight of a button. For details, see the **font-weight** style of the **[\<text>](js-service-widget-basic-text.md#styles)** component.|
43| font-family | &lt;string&gt; | sans-serif | No| Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](js-service-widget-common-customizing-font.md) is used for the text.|
44| icon-width | &lt;length&gt; | - | No| Width of the internal icon of a circle button. By default, the icon takes up the entire width of the button.<br>This style must be set when the icon uses an SVG image.|
45| icon-height | &lt;length&gt; | - | No| Height of the internal icon of a circle button. By default, the icon takes up the entire height of the button.<br>This style must be set when the icon uses an SVG image.|
46| radius | &lt;length&gt; | - | No| Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.|
47
48>  **NOTE**
49> - For capsule buttons, border-related styles are not supported.
50>
51> - For circle buttons, text-related styles are not supported.
52>
53> - For text buttons, the text size is automatically adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent.
54
55
56## Example
57
58
59```html
60<!-- xxx.hml -->
61<div class="div-button">
62  <button class="button" type="capsule" value="Capsule button"></button>
63  <button class="button circle" type="circle" icon="common/ic_add_default.png"></button>
64  <button class="button text" type="text">Text button</button>
65</div>
66```
67
68
69```css
70/* xxx.css */
71.div-button {
72  flex-direction: column;
73  align-items: center;
74}
75.button {
76  margin-top: 15px;
77}
78.circle {
79  background-color: #007dff;
80  radius: 72px;
81  icon-width: 72px;
82  icon-height: 72px;
83}
84.text {
85  text-color: red;
86  font-size: 40px;
87  font-weight: 900;
88  font-family: sans-serif;
89  font-style: normal;
90}
91```
92**4 x 4 widget**
93
94![button](figures/button.jpg)
95