<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p196974598338"><aname="p196974598338"></a><aname="p196974598338"></a>Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using <strongid="b14306174652119"><aname="b14306174652119"></a><aname="b14306174652119"></a>border-radius</strong>. Available button types are as follows:</p>
<aname="ul16971659103317"></a><aname="ul16971659103317"></a><ulid="ul16971659103317"><li><strongid="b2068317502142"><aname="b2068317502142"></a><aname="b2068317502142"></a>capsule</strong>: a capsule button with fillets, background color, and text</li><li><strongid="b13498122171611"><aname="b13498122171611"></a><aname="b13498122171611"></a>circle</strong>: a circle button which can be used to place icons</li><li><strongid="b17405113184910"><aname="b17405113184910"></a><aname="b17405113184910"></a>text</strong>: a text button which displays the text only</li><li><strongid="b1654481619215"><aname="b1654481619215"></a><aname="b1654481619215"></a>arc</strong>: an arc button. This value is applicable to wearables only.</li><li><strongid="b49041951132"><aname="b49041951132"></a><aname="b49041951132"></a>download</strong>: a download button. The download progress bar is added. </li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p369810591333"><aname="p369810591333"></a><aname="p369810591333"></a>Text value of the button.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p8698135914336"><aname="p8698135914336"></a><aname="p8698135914336"></a>Path of the button icon. The supported icon formats are JPG, PNG, and SVG.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1990410531316"><aname="p1990410531316"></a><aname="p1990410531316"></a>Position of the button icon in text. This attribute is valid only when <strongid="b7806194033312"><aname="b7806194033312"></a><aname="b7806194033312"></a>type</strong> is not set. Available values are as follows:</p>
<aname="ul1190565393119"></a><aname="ul1190565393119"></a><ulid="ul1190565393119"><li><strongid="b16321184818358"><aname="b16321184818358"></a><aname="b16321184818358"></a>start</strong>: The button icon is at the beginning of the text.</li><li><strongid="b38597343610"><aname="b38597343610"></a><aname="b38597343610"></a>end</strong>: The button icon is at the end of the text.</li><li><strongid="b392914514369"><aname="b392914514369"></a><aname="b392914514369"></a>top</strong>: The button icon is at the top of the text.</li><li><strongid="b1869118113613"><aname="b1869118113613"></a><aname="b1869118113613"></a>bottom</strong>: The button icon is at the bottom of the text.</li></ul>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1069813596335"><aname="p1069813596335"></a><aname="p1069813596335"></a>Waiting status. When <strongid="b907588224"><aname="b907588224"></a><aname="b907588224"></a>waiting</strong> is set to <strongid="b322732615299"><aname="b322732615299"></a><aname="b322732615299"></a>true</strong>, the waiting transition is displayed on the left of the text. This attribute is unavailable for download buttons and wearables.</p>
</td>
</tr>
</tbody>
</table>
## Styles<a name="section5775351116"></a>
### When the Button Type Is Not **arc**<a name="section1511020589345"></a>
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p1683719306444"><aname="p1683719306444"></a><aname="p1683719306444"></a>Text color of the button.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p1283823019443"><aname="p1283823019443"></a><aname="p1283823019443"></a>Font size of the button.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p7838330184418"><aname="p7838330184418"></a><aname="p7838330184418"></a>Whether the font size changes with the system's font size settings.</p>
<divclass="note"id="note583873013443"><aname="note583873013443"></a><aname="note583873013443"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p1483818307443"><aname="p1483818307443"></a><aname="p1483818307443"></a>If the <strongid="b524714361237"><aname="b524714361237"></a><aname="b524714361237"></a>config-changes</strong> tag of <strongid="b19256136236"><aname="b19256136236"></a><aname="b19256136236"></a>fontSize</strong> is configured for abilities in the <strongid="b32576360318"><aname="b32576360318"></a><aname="b32576360318"></a>config.json</strong> file, the setting takes effect without application restart.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p16838123015449"><aname="p16838123015449"></a><aname="p16838123015449"></a>Font style of the button.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p183810309449"><aname="p183810309449"></a><aname="p183810309449"></a>Font weight of the button. For details, see <strongid="b13251142411298"><aname="b13251142411298"></a><aname="b13251142411298"></a>font-weight</strong> of the <ahref="js-components-basic-text.md#section5775351116">text</a> component.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p38395308443"><aname="p38395308443"></a><aname="p38395308443"></a>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 font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p148391030114411"><aname="p148391030114411"></a><aname="p148391030114411"></a>Width of the internal icon of a circle button. The entire circle button is filled by default.</p>
<divclass="note"id="note1983911301443"><aname="note1983911301443"></a><aname="note1983911301443"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p183993054416"><aname="p183993054416"></a><aname="p183993054416"></a>This style must be set when the icon uses the SVG image.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p1084018307444"><aname="p1084018307444"></a><aname="p1084018307444"></a>Height of the internal icon of a circle button. The entire circle button is filled by default.</p>
<divclass="note"id="note18840133012443"><aname="note18840133012443"></a><aname="note18840133012443"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p178401630194412"><aname="p178401630194412"></a><aname="p178401630194412"></a>This style must be set when the icon uses the SVG image.</p>
<tdclass="cellrowborder"valign="top"width="45.28547145285472%"headers="mcps1.1.6.1.5 "><pid="p11841183004414"><aname="p11841183004414"></a><aname="p11841183004414"></a>Button radius. For a circle button, this style takes precedence over <strongid="b5673247143117"><aname="b5673247143117"></a><aname="b5673247143117"></a>width</strong> and <strongid="b17675114743117"><aname="b17675114743117"></a><aname="b17675114743117"></a>height</strong> in the common styles.</p>
>- For capsule buttons, border-related styles are not supported.
>- For circle buttons, text-related styles are not supported.
>- 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.
### When the Button Type Is **arc**<a name="section16818713355"></a>
In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, **\[left|top****|right|bottom** styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p4502145044012"><aname="p4502145044012"></a><aname="p4502145044012"></a>Text color of the arc button.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p8503150114014"><aname="p8503150114014"></a><aname="p8503150114014"></a>Font size of the arc button.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p75041650194011"><aname="p75041650194011"></a><aname="p75041650194011"></a>Whether the font size changes with the system's font size settings.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1850485012408"><aname="p1850485012408"></a><aname="p1850485012408"></a>Font style of the arc button.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1750515044020"><aname="p1750515044020"></a><aname="p1750515044020"></a>Font weight of the arc button. For details, see <ahref="js-components-basic-text.md#section5775351116">font-weight</a> of the <strongid="b2052935545014"><aname="b2052935545014"></a><aname="b2052935545014"></a>text</strong> component.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p9505195015402"><aname="p9505195015402"></a><aname="p9505195015402"></a>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 font specified by <ahref="js-components-common-customizing-font.md">Custom Font Styles</a> is used for the text.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section71081937192815"></a>
Events in [Universal Events](js-components-common-events.md) are supported.
## Methods<a name="section47669296127"></a>
Methods in [Universal Methods](js-components-common-methods.md) are supported.
When the button type is **download**, the following methods are supported.
<tdclass="cellrowborder"valign="top"width="54%"headers="mcps1.1.4.1.3 "><pid="p157114142914"><aname="p157114142914"></a><aname="p157114142914"></a>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.</p>
<divclass="note"id="note11137355291"><aname="note11137355291"></a><aname="note11137355291"></a><spanclass="notetitle"> NOTE: </span><divclass="notebody"><pid="p19137355592"><aname="p19137355592"></a><aname="p19137355592"></a>The text displayed on the progress bar is changed based on the value.</p>
</div></div>
</td>
</tr>
</tbody>
</table>
## Example<a name="section16867208402"></a>
```
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| type | string | - | No | Button type. The value cannot be dynamically updated. If this attribute is not set, a capsule-like button is displayed. Different from 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.<br>- **arc**: arc button. This value is applicable to wearables only.<br>- **download**: download button, with an extra download progress bar.|
| value | string | - | No | Text value of the button. |
| icon | string | - | No | Path of the button icon. The supported icon formats are JPG, PNG, and SVG. |
| 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.|
| 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.|
## Styles
### When the Button Type Is Not arc
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| text-color | <color> | \#007dff<br>| No | Text color of the button. |
| font-size | <length> | 16px<br> | No | Font size of the button. |
| 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.|
| font-style | string | normal | No | Font style of the button. |
| font-weight | number \| string | normal | No | Font weight of the button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| 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 font specified by [Custom Font Styles](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| 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.|
| 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.|
| radius | <length> | - | No | Corner radius of the button. For a circle button, this style takes precedence over **width** and **height** in the universal styles.|
> **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
>
> - For text buttons, the font 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.
### When the Button Type Is arc
In addition to the **background-color**, **opacity**, **display**, **visibility**, **position**, **[left|top|right|bottom]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
| text-color | <color> | \#de0000 | No | Text color of the arc button. |
| font-size | <length> | 37.5px | No | Font size of the arc button. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings. |
| font-style | string | normal | No | Font style of the arc button. |
| font-weight | number \| string | normal | No | Font weight of the arc button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md#styles).|
| 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 font specified by [Custom Font Styles](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events
The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods
The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
When the button type is **download**, the following methods are supported.
| 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.|
