1# button 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<button>** component includes capsule, circle, text, arc, and download buttons. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 18 19| Name | Type | Default Value | Mandatory | Description | 20| ---------------------- | ------- | ----- | ---- | ---------------------------------------- | 21| type | string | - | No | Button type. The value cannot be dynamically updated. By default, a capsule-like button is displayed. Unlike the capsule button, the capsule-like button allows its corners to be configured using **border-radius**. The options 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.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.| 22| value | string | - | No | Text value of the button. | 23| icon | string | - | No | Path of the button icon. The supported icon formats are JPG, PNG, and SVG. | 24| placement<sup>5+</sup> | 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 | Waiting status. When this attribute is set to **true**, a loading animation is displayed on the left of the text. This attribute does not work for download buttons.| 26 27 28## Styles 29 30 31### When the Button Type Is Not arc 32 33In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 34 35| Name | Type | Default Value | Mandatory | Description | 36| ----------- | -------------------------- | --------------- | ---- | ---------------------------------------- | 37| text-color | <color> | \#007dff | No | Text color of the button. | 38| font-size | <length> | 16px | No | Font size of the button. | 39| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| 40| font-style | string | normal | No | Font style of the button. | 41| font-weight | number \| string | normal | No | Font weight of the button. For details, see **font-weight** of the [**\<text>** component](js-components-basic-text.md#styles).| 42| font-family | <string> | 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-components-common-customizing-font.md) is used for the text.| 43| icon-width | <length> | - | No | Width of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.| 44| icon-height | <length> | - | No | Height of the internal icon of a circle button. The entire circle button is filled by default.<br>This style must be set when the icon uses the SVG image.| 45| radius | <length> | - | No | Corner radius of the button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.| 46 47 48### When the Button Type Is arc 49 50In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, and **[left|top|right|bottom]** styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. 51 52| Name | Type | Default Value | Mandatory | Description | 53| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- | 54| text-color | <color> | \#de0000 | No | Text color of the arc button. | 55| font-size | <length> | 37.5px | No | Font size of the arc button. | 56| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. | 57| font-style | string | normal | No | Font style of the arc button. | 58| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>**](js-components-basic-text.md#styles) component. | 59| font-family | <string> | 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-components-common-customizing-font.md) is used for the text.| 60 61 62## Events 63 64The [universal events](js-components-common-events.md) are supported. 65 66 67## Methods 68 69The [universal methods](js-components-common-methods.md) are supported. 70 71When the button type is **download**, the following methods are supported. 72 73| Name | Parameters | Description | 74| ----------- | ------------------------------ | ---------------------------------------- | 75| setProgress | { progress:percent } | Progress bar of the download button. The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. If the value is greater than or equal to 100, the progress bar is not displayed.<br>The text displayed on the progress bar is subject to the **value** settings.| 76 77## Example 78 79```html 80<!-- xxx.hml --> 81<div class="div-button"> 82 <button class="first" type="capsule" value="Capsule button"></button> 83 <button class="button circle" type="circle" icon="common/ic_add_default.png"></button> 84 <button class="button text" type="text">Text button</button> 85 <button class="button download" type="download" id="download-btn" 86 onclick="progress">{{downloadText}}</button> 87 <button class="last" type="capsule" waiting="true">Loading</button> 88</div> 89``` 90 91```css 92/* xxx.css */ 93.div-button { 94 flex-direction: column; 95 align-items: center; 96} 97.first{ 98 background-color: #F2F2F2; 99 text-color: #0D81F2; 100} 101.button { 102 margin-top: 15px; 103} 104.last{ 105 background-color: #F2F2F2; 106 text-color: #969696; 107 margin-top: 15px; 108 width: 280px; 109 height:72px; 110} 111.button:waiting { 112 width: 280px; 113} 114.circle { 115 background-color: #007dff; 116 radius: 72px; 117 icon-width: 72px; 118 icon-height: 72px; 119} 120.text { 121 text-color: red; 122 font-size: 40px; 123 font-weight: 900; 124 font-family: sans-serif; 125 font-style: normal; 126} 127.download { 128 width: 280px; 129 text-color: white; 130 background-color: #007dff; 131} 132``` 133 134```js 135// xxx.js 136export default { 137 data: { 138 count: 5, 139 downloadText: "Download" 140 }, 141 progress(e) { 142 this.count+= 10; 143 this.downloadText = this.count+ "%"; 144 this.$element('download-btn').setProgress({ progress: this.count}); 145 if (this.count>= 100) { 146 this.downloadText = "Done"; 147 } 148 } 149} 150``` 151 152 153
