1# Button 2 3The **Button** component can be used to create different types of buttons. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12This component can contain only one child component. 13 14 15## APIs 16 17### Button 18 19Button(options: ButtonOptions) 20 21Creates a button that can contain a single child component. 22 23**Widget capability**: This API can be used in ArkTS widgets since API version 9. 24 25**Atomic service API**: This API can be used in atomic services since API version 11. 26 27**System capability**: SystemCapability.ArkUI.ArkUI.Full 28 29**Parameters** 30 31| Name | Type | Mandatory| Description | 32| ------- | --------------------------------------- | ---- | -------------------- | 33| options | [ButtonOptions](#buttonoptions) | Yes | Button settings.| 34 35### Button 36 37Button(label: ResourceStr, options?: ButtonOptions) 38 39Creates a button based on text content. In this case, the component cannot contain child components. 40 41By default, the text content is displayed in a one line. 42 43**Widget capability**: This API can be used in ArkTS widgets since API version 9. 44 45**Atomic service API**: This API can be used in atomic services since API version 11. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49**Parameters** 50 51| Name | Type | Mandatory| Description | 52| ------- | --------------------------------------- | ---- | -------------------- | 53| label | [ResourceStr](ts-types.md#resourcestr) | Yes | Button text.<br>**NOTE**<br>If the text is longer than the width of the button, it is truncated.| 54| options | [ButtonOptions](#buttonoptions) | No | Button settings.| 55 56### Button 57 58Button() 59 60Creates an empty button. 61 62**Widget capability**: This API can be used in ArkTS widgets since API version 9. 63 64**Atomic service API**: This API can be used in atomic services since API version 11. 65 66**System capability**: SystemCapability.ArkUI.ArkUI.Full 67 68## ButtonOptions 69 70**System capability**: SystemCapability.ArkUI.ArkUI.Full 71 72| Name | Type | Mandatory| Description | 73| ------------------------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 74| type | [ButtonType](#buttontype) | No | Button type.<br>Default value:<br> - API version 18 and later versions: **ButtonType.ROUNDED_RECTANGLE**<br> - Versions earlier than API version 18: **ButtonType.Capsule**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 75| stateEffect | boolean | No | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**<br>**NOTE**<br>When the pressed effect is enabled on the click of the button and the state style is set, the background color is applied based on the state style.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 76| buttonStyle<sup>11+</sup> | [ButtonStyleMode](#buttonstylemode11) | No | Style and primacy of the button.<br>Default value: **ButtonStyleMode.EMPHASIZED**<br>**NOTE**<br>The button primacy is as follows, from high to low: emphasized button, normal button, text button.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 77| controlSize<sup>11+</sup> | [ControlSize](#controlsize11) | No | Size of the button.<br>Default value: **ControlSize.NORMAL**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 78| role<sup>12+</sup> | [ButtonRole](#buttonrole12) | No | Role of the button.<br>Default value: **ButtonRole.NORMAL**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 79 80## Attributes 81 82In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 83 84### type 85 86type(value: ButtonType) 87 88Sets the button type. 89 90**Widget capability**: This API can be used in ArkTS widgets since API version 9. 91 92**Atomic service API**: This API can be used in atomic services since API version 11. 93 94**System capability**: SystemCapability.ArkUI.ArkUI.Full 95 96**Parameters** 97 98| Name| Type | Mandatory| Description | 99| ------ | --------------------------------- | ---- | ------------------------------------------- | 100| value | [ButtonType](#buttontype) | Yes | Button type.<br>Default value: **ButtonType.ROUNDED_RECTANGLE**| 101 102### fontSize 103 104fontSize(value: Length) 105 106Sets the font size for the button. 107 108**Widget capability**: This API can be used in ArkTS widgets since API version 9. 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114**Parameters** 115 116| Name| Type | Mandatory| Description | 117| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 118| value | [Length](ts-types.md#length) | Yes | Font size of the button.<br>Default value:<br>**$r('sys.float.Body_L')** when **controlSize** is set to **ControlSize.NORMAL**<br>**$r('sys.float.Body_S')** when **controlSize** is set to **ControlSize.SMALL**<br>**NOTE**<br>For the string type, percentage values are not supported.| 119 120### fontColor 121 122fontColor(value: ResourceColor) 123 124Sets the font color for the button. 125 126**Widget capability**: This API can be used in ArkTS widgets since API version 9. 127 128**Atomic service API**: This API can be used in atomic services since API version 11. 129 130**System capability**: SystemCapability.ArkUI.ArkUI.Full 131 132**Parameters** 133 134| Name| Type | Mandatory| Description | 135| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 136| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Font color of the button.<br>Default value: **$r('sys.color.font_on_primary')**, which means white| 137 138### fontWeight 139 140fontWeight(value: number | FontWeight | string) 141 142Sets the font weight for the button. 143 144**Widget capability**: This API can be used in ArkTS widgets since API version 9. 145 146**Atomic service API**: This API can be used in atomic services since API version 11. 147 148**System capability**: SystemCapability.ArkUI.ArkUI.Full 149 150**Parameters** 151 152| Name| Type | Mandatory| Description | 153| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 154| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Yes | Font weight of the button. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a thicker font.<br>Default value: **500**| 155 156### fontStyle<sup>8+</sup> 157 158fontStyle(value: FontStyle) 159 160Sets the font style for the button. 161 162**Widget capability**: This API can be used in ArkTS widgets since API version 9. 163 164**Atomic service API**: This API can be used in atomic services since API version 11. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168**Parameters** 169 170| Name| Type | Mandatory| Description | 171| ------ | ------------------------------------------- | ---- | ----------------------------------------------- | 172| value | [FontStyle](ts-appendix-enums.md#fontstyle) | Yes | Font style of the button.<br>Default value: **FontStyle.Normal**| 173 174### stateEffect 175 176stateEffect(value: boolean) 177 178Specifies whether to enable the pressed effect on the click of the button. 179 180**Widget capability**: This API can be used in ArkTS widgets since API version 9. 181 182**Atomic service API**: This API can be used in atomic services since API version 11. 183 184**System capability**: SystemCapability.ArkUI.ArkUI.Full 185 186**Parameters** 187 188| Name| Type | Mandatory| Description | 189| ------ | ------- | ---- | ------------------------------------------------------------ | 190| value | boolean | Yes | Whether to enable the pressed effect on the click of the button. The value **false** means to disable the pressed effect.<br>Default value: **true**| 191 192> **NOTE** 193> 194> When the polymorphic style is used to set the pressed state, set **stateEffect** to **false** to avoid conflicts between the built-in and custom pressed state effects. 195 196### fontFamily<sup>8+</sup> 197 198fontFamily(value: string | Resource) 199 200Sets the font family. 201 202**Widget capability**: This API can be used in ArkTS widgets since API version 9. 203 204**Atomic service API**: This API can be used in atomic services since API version 11. 205 206**System capability**: SystemCapability.ArkUI.ArkUI.Full 207 208**Parameters** 209 210| Name| Type | Mandatory| Description | 211| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 212| value | string \| [Resource](ts-types.md#resource) | Yes | Font family. The 'HarmonyOS Sans' font and [registered custom fonts](../js-apis-font.md) are supported.| 213 214### labelStyle<sup>10+</sup> 215 216labelStyle(value: LabelStyle) 217 218Sets the label style for the button. 219 220**Atomic service API**: This API can be used in atomic services since API version 11. 221 222**System capability**: SystemCapability.ArkUI.ArkUI.Full 223 224**Parameters** 225 226| Name| Type | Mandatory| Description | 227| ------ | ----------------------------------- | ---- | --------------------------------- | 228| value | [LabelStyle](#labelstyle10) | Yes | Label style of the button.| 229 230### buttonStyle<sup>11+</sup> 231 232buttonStyle(value: ButtonStyleMode) 233 234Sets the style and primacy for the button. 235 236**Widget capability**: This API can be used in ArkTS widgets since API version 11. 237 238**Atomic service API**: This API can be used in atomic services since API version 12. 239 240**System capability**: SystemCapability.ArkUI.ArkUI.Full 241 242**Parameters** 243 244| Name| Type | Mandatory| Description | 245| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 246| value | [ButtonStyleMode](#buttonstylemode11) | Yes | Style and primacy of the button<br>Default value: **ButtonStyleMode.EMPHASIZED**| 247 248### controlSize<sup>11+</sup> 249 250controlSize(value: ControlSize) 251 252Sets the size for the button. 253 254**Widget capability**: This API can be used in ArkTS widgets since API version 11. 255 256**Atomic service API**: This API can be used in atomic services since API version 12. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name| Type | Mandatory| Description | 263| ------ | ------------------------------------- | ---- | ------------------------------------------------ | 264| value | [ControlSize](#controlsize11) | Yes | Size of the button.<br>Default value: **ControlSize.NORMAL**| 265 266### role<sup>12+</sup> 267 268role(value: ButtonRole) 269 270Sets the role of the button. 271 272**Widget capability**: This API can be used in ArkTS widgets since API version 12. 273 274**Atomic service API**: This API can be used in atomic services since API version 12. 275 276**System capability**: SystemCapability.ArkUI.ArkUI.Full 277 278**Parameters** 279 280| Name| Type | Mandatory| Description | 281| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 282| value | [ButtonRole](#buttonrole12) | Yes | Role of the button.<br>Default value: **ButtonRole.NORMAL**| 283 284### contentModifier<sup>12+</sup> 285 286contentModifier(modifier: ContentModifier\<ButtonConfiguration>) 287 288Creates a content modifier. 289 290**Atomic service API**: This API can be used in atomic services since API version 12. 291 292**System capability**: SystemCapability.ArkUI.ArkUI.Full 293 294**Parameters** 295 296| Name| Type | Mandatory| Description | 297| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 298| modifier | [ContentModifier\<ButtonConfiguration>](#buttonconfiguration12) | Yes | Content modifier to apply to the button.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 299 300### minFontScale<sup>18+</sup> 301 302minFontScale(scale: number | Resource) 303 304Sets the minimum font scale factor for text. 305 306**Atomic service API**: This API can be used in atomic services since API version 18. 307 308**System capability**: SystemCapability.ArkUI.ArkUI.Full 309 310**Parameters** 311 312| Name| Type | Mandatory| Description | 313| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 314| scale | number \| [Resource](ts-types.md#resource) | Yes | Minimum font scale factor for text.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 is handled as **0**. A value greater than 1 is handled as **1**. Abnormal values are ineffective by default.<br>If the multiplier is set to 0, no content is displayed.| 315 316### maxFontScale<sup>18+</sup> 317 318maxFontScale(scale: number | Resource) 319 320Setting the scale factor to **0** hides the content. 321 322**Atomic service API**: This API can be used in atomic services since API version 18. 323 324**System capability**: SystemCapability.ArkUI.ArkUI.Full 325 326**Parameters** 327 328| Name| Type | Mandatory| Description | 329| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 330| scale | number \| [Resource](ts-types.md#resource) | Yes | Maximum font scale factor for text.<br>Value range: [1, +∞)<br>**NOTE**<br>A value less than 1 is handled as **1**. Abnormal values are ineffective by default.<br>If not set, the maximum scale factor for circle buttons is 1.| 331 332## ButtonType 333 334**System capability**: SystemCapability.ArkUI.ArkUI.Full 335 336| Name | Description | 337| ------- | ------------------ | 338| Capsule | Capsule-type button (the round corner is half of the height by default).**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 339| Circle | Circular button.**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 340| Normal | Normal button, with no rounded corners by default. **<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 341| ROUNDED_RECTANGLE<sup>15+</sup> | Rounded rectangle button (default value: when **controlSize** is **NORMAL**, the corner radius is 20 vp; when controlSize is **SMALL**, the corner radius is 14 vp).**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 15.**<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 342 343> **NOTE** 344> - The corner radius of the rounded rectangle button is set using the universal attribute [borderRadius](ts-universal-attributes-border.md#borderradius). 345> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the radius of its rounded corner is always half of the button height or width, whichever is smaller. 346> - For a button of the **Circle** type: (1) If both its width and height are set, **borderRadius** does not take effect, and the button radius is half of the width or height (whichever is smaller). (2) If either its width or height is set, **borderRadius** does not take effect, and the button radius is half of the set width or height. (3) If neither its width nor height is set, the button radius is as specified by **borderRadius**; if **borderRadius** is set to a negative value, the value **0** will be used. 347> - The button text is set using [fontSize](#fontsize), [fontColor](#fontcolor), [fontStyle](#fontstyle8), [fontFamily](#fontfamily8) and [fontWeight](#fontweight). 348> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md#backgroundcolor) to transparent. 349> - When **borderRadius** is not set, the corner radius of the rounded rectangle button remains at the default value. In this case, the corner radius does not change with the button height and is subject to the **controlSize** property. When **controlSize** is **NORMAL**, the corner radius is 20 vp; when **controlSize** is **SMALL**, the corner radius is 14 vp. 350 351## LabelStyle<sup>10+</sup> 352 353**Atomic service API**: This API can be used in atomic services since API version 11. 354 355**System capability**: SystemCapability.ArkUI.ArkUI.Full 356 357| Name | Type | Mandatory| Description | 358| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 359| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. Text is clipped at the transition between words. To clip text in the middle of a word, add zero-width spaces between characters.<br>Default value: **TextOverflow.Ellipsis**| 360| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **overflow** to specify how it is displayed.<br>Default value: **1**| 361| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.<br>**NOTE**<br>If the value of **minFontSize** is less than or equal to 0, the adaptive font size does not take effect.| 362| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.| 363| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text.<br>Default value: **TextHeightAdaptivePolicy.MAX_LINES_FIRST**| 364| font | [Font](ts-types.md#font) | No | Font of the label text.<br>Default value: See [Font](ts-types.md#font).| 365 366## ButtonStyleMode<sup>11+</sup> 367 368**Widget capability**: This API can be used in ArkTS widgets since API version 11. 369 370**Atomic service API**: This API can be used in atomic services since API version 12. 371 372**System capability**: SystemCapability.ArkUI.ArkUI.Full 373 374| Name | Value| Description | 375| ------- | -- |------------------ | 376| NORMAL | 0 |Normal button (used to direct the user to a common task). | 377| EMPHASIZED | 1 |Emphasized button (used to direct the user to the most important task).| 378| TEXTUAL | 2 |Text button (displayed as simple text without any background color). | 379 380## ControlSize<sup>11+</sup> 381 382**Widget capability**: This API can be used in ArkTS widgets since API version 11. 383 384**Atomic service API**: This API can be used in atomic services since API version 12. 385 386**System capability**: SystemCapability.ArkUI.ArkUI.Full 387 388| Name | Value|Description | 389| ------- | -- |------------------ | 390| SMALL | "small" |Small button.| 391| NORMAL | "normal" |Normal button. | 392 393## ButtonRole<sup>12+</sup> 394 395**Widget capability**: This API can be used in ArkTS widgets since API version 12. 396 397**Atomic service API**: This API can be used in atomic services since API version 12. 398 399**System capability**: SystemCapability.ArkUI.ArkUI.Full 400 401| Name | Value|Description | 402| ------- | -- |------------------ | 403| NORMAL | 0 |Normal button.| 404| ERROR | 1 |Warning button. | 405 406## ButtonConfiguration<sup>12+</sup> 407 408You need a custom class to implement the **ContentModifier** API. 409 410**Atomic service API**: This API can be used in atomic services since API version 12. 411 412**System capability**: SystemCapability.ArkUI.ArkUI.Full 413 414| Name | Type | Read Only | Optional| Description | 415| ------ | ------ | ---------------- | ---------------- | ---------------- | 416| label | string | No| No| Text label of the button.<br>**NOTE**<br>If the text is longer than the width of the button, it is truncated.| 417| pressed | boolean | No| No| Whether the button is pressed. **true**: The button is pressed.<br>**false**: The button is not pressed.<br>**NOTE**<br>The button here refers to the original button, not the new component constructed using the builder. If the new component is larger than the original button, this parameter does not signify the pressed state of the excess part.<br>Default value: **false**| 418| triggerClick | [ButtonTriggerClickCallback](#buttontriggerclickcallback12) | No| No| Click event of the new component constructed using the builder.| 419 420## ButtonTriggerClickCallback<sup>12+</sup> 421 422type ButtonTriggerClickCallback = (xPos: number, yPos: number) => void 423 424Defines the callback type used in **ButtonConfiguration**. 425 426**Atomic service API**: This API can be used in atomic services since API version 12. 427 428**System capability**: SystemCapability.ArkUI.ArkUI.Full 429 430**Parameters** 431 432| Name | Type | Mandatory| Description | 433| ------ | ------ | ---- | ---------------- | 434| xPos | number | Yes| X-coordinate of the click point.<br>Unit: vp| 435| yPos | number | Yes| Y-coordinate of the click point.<br>Unit: vp| 436 437## Events 438 439The [universal events](ts-component-general-events.md) are supported. 440## Example 441 442### Example 1: Setting the Button Display Style 443 444This example demonstrates two methods to create buttons, either with child components or using text content. 445 446```ts 447// xxx.ets 448@Entry 449@Component 450struct ButtonExample { 451 build() { 452 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 453 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 454 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 455 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 456 .borderRadius(8) 457 .backgroundColor(0x317aff) 458 .width(90) 459 .onClick(() => { 460 console.log('ButtonType.Normal') 461 }) 462 Button({ type: ButtonType.Normal, stateEffect: true }) { 463 Row() { 464 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 465 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 466 }.alignItems(VerticalAlign.Center) 467 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 468 469 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 470 .borderRadius(8).backgroundColor(0x317aff).width(90) 471 } 472 473 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 474 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 475 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 476 Button({ type: ButtonType.Capsule, stateEffect: true }) { 477 Row() { 478 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 479 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 480 }.alignItems(VerticalAlign.Center).width(90).height(40) 481 }.backgroundColor(0x317aff) 482 483 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 484 .backgroundColor(0x317aff).width(90) 485 } 486 487 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 488 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 489 Button({ type: ButtonType.Circle, stateEffect: true }) { 490 LoadingProgress().width(20).height(20).color(0xFFFFFF) 491 }.width(55).height(55).backgroundColor(0x317aff) 492 493 Button({ type: ButtonType.Circle, stateEffect: true }) { 494 LoadingProgress().width(20).height(20).color(0xFFFFFF) 495 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 496 } 497 }.height(400).padding({ left: 35, right: 35, top: 35 }) 498 } 499} 500``` 501 502 503 504### Example 2: Adding Render Control to a Button 505 506This example uses if/else statements to control the display text of the button. 507 508```ts 509// xxx.ets 510@Entry 511@Component 512struct SwipeGestureExample { 513 @State count: number = 0 514 515 build() { 516 Column() { 517 Text(`${this.count}`) 518 .fontSize(30) 519 .onClick(() => { 520 this.count++ 521 }) 522 if (this.count <= 0) { 523 Button('count is negative').fontSize(30).height(50) 524 } else if (this.count % 2 === 0) { 525 Button('count is even').fontSize(30).height(50) 526 } else { 527 Button('count is odd').fontSize(30).height(50) 528 } 529 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 530 } 531} 532``` 533 534 535 536### Example 3: Setting the Button Text Style 537 538This example customizes the display style of button text by configuring **labelStyle**. 539 540```ts 541// xxx.ets 542@Entry 543@Component 544struct buttonTestDemo { 545 @State txt: string = 'overflowTextOverlengthTextOverflow.Clip'; 546 @State widthShortSize: number = 210; 547 548 build() { 549 Row() { 550 Column() { 551 Button(this.txt) 552 .width(this.widthShortSize) 553 .height(100) 554 .backgroundColor(0x317aff) 555 .labelStyle({ overflow: TextOverflow.Clip, 556 maxLines: 1, 557 minFontSize: 20, 558 maxFontSize: 20, 559 font: { 560 size: 20, 561 weight: FontWeight.Bolder, 562 family: 'cursive', 563 style: FontStyle.Italic 564 } 565 }) 566 .fontSize(40) 567 } 568 .width('100%') 569 } 570 .height('100%') 571 } 572} 573``` 574 575 576 577### Example 4: Setting Importance of Different Sized Buttons 578 579This example demonstrates how to set the importance of buttons of different sizes by configuring **controlSize** and **buttonStyle**. 580 581```ts 582// xxx.ets 583@Entry 584@Component 585struct ButtonExample { 586 build() { 587 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 588 Text('Normal size button').fontSize(9).fontColor(0xCCCCCC) 589 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 590 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED }); 591 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL }); 592 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL }); 593 } 594 595 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 596 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 597 Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED }); 598 Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL }); 599 Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL }); 600 } 601 602 Text('Small size button').fontSize(9).fontColor(0xCCCCCC) 603 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 604 Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED); 605 Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL); 606 Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL); 607 } 608 609 }.height(400).padding({ left: 35, right: 35, top: 35 }) 610 } 611} 612``` 613 614 615### Example 5: Setting the Button Role 616 617This example demonstrates how to set the role of the button by configuring **role**. 618 619```ts 620// xxx.ets 621@Entry 622@Component 623struct ButtonExample { 624 build() { 625 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 626 Text('Role is Normal button').fontSize(9).fontColor(0xCCCCCC) 627 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 628 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.NORMAL }); 629 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL }); 630 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.NORMAL }); 631 } 632 Text('Role is Error button').fontSize(9).fontColor(0xCCCCCC) 633 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 634 Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR}); 635 Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.ERROR }); 636 Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }); 637 } 638 }.height(200).padding({ left: 35, right: 35, top: 35 }) 639 } 640} 641``` 642 643 644### Example 6: Implementing a Custom Button 645This example implements a custom button in the shape of a circle. The circle is red when pressed, accompanied by the text "Pressed" in the title. It is black when not pressed, accompanied by the text "Not pressed" in the title. 646```ts 647class MyButtonStyle implements ContentModifier<ButtonConfiguration> { 648 x: number = 0 649 y: number = 0 650 selectedColor:Color = Color.Black 651 652 constructor(x : number, y: number,ColorType:Color) { 653 this.x = x 654 this.y = y 655 this.selectedColor = ColorType 656 } 657 applyContent() : WrappedBuilder<[ButtonConfiguration]> 658 { 659 return wrapBuilder(buildButton1) 660 } 661} 662 663@Builder function buildButton1(config: ButtonConfiguration) { 664 Column({space:30}) { 665 Text(config.enabled ? "enabled true" : "enabled false") 666 Text('Circle state' + (config.pressed? "(Pressed)" : "(Not pressed)")) 667 Text('X-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).x : "0")) 668 Text('Y-coordinate of the click point:' + (config.enabled ? (config.contentModifier as MyButtonStyle).y : "0")) 669 Circle({ width: 50, height: 50 }) 670 .fill(config.pressed ? (config.contentModifier as MyButtonStyle).selectedColor : Color.Black) 671 .gesture( 672 TapGesture({count:1}).onAction((event: GestureEvent)=>{ 673 config.triggerClick(event.fingerList[0].localX,event.fingerList[0].localY) 674 })).opacity(config.enabled ? 1 : 0.1) 675 } 676} 677 678@Entry 679@Component 680struct ButtonExample { 681 @State buttonEnabled: boolean = true; 682 @State positionX: number = 0 683 @State positionY: number = 0 684 @State state : boolean[] = [true,false] 685 @State index:number = 0 686 build() { 687 Column() { 688 Button('OK') 689 .contentModifier(new MyButtonStyle(this.positionX,this.positionY,Color.Red)) 690 .onClick((event) => { 691 console.info('change' + JSON.stringify(event)) 692 this.positionX = event.displayX 693 this.positionY = event.displayY 694 }).enabled(this.buttonEnabled) 695 Row() { 696 Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => { 697 if (value) { 698 this.buttonEnabled = true 699 } else { 700 this.buttonEnabled = false 701 } 702 }).margin({left:-80}) 703 } 704 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 705 } 706} 707``` 708 709 710### Example 7: Setting Rounded Rectangle Buttons 711This example creates rounded rectangle buttons by configuring **ButtonType.ROUNDED_RECTANGLE**. 712```ts 713@Entry 714@Component 715struct ButtonExample { 716 build() { 717 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 718 Text('Rounded rectangle button with rounded corners by default.').fontSize(9).fontColor(0xCCCCCC) 719 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 720 Button('Rounded rectangle') 721 .type(ButtonType.ROUNDED_RECTANGLE) 722 .backgroundColor(0x317aff) 723 .controlSize(ControlSize.NORMAL) 724 .width(180) 725 } 726 Text('Rounded rectangle button configured with a borderRadius of 5.').fontSize(9).fontColor(0xCCCCCC) 727 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 728 Button('Rounded rectangle') 729 .type(ButtonType.ROUNDED_RECTANGLE) 730 .backgroundColor(0x317aff) 731 .controlSize(ControlSize.NORMAL) 732 .width(180) 733 .borderRadius(5) 734 } 735 Text('Rounded rectangle button configured extra long text.').fontSize(9).fontColor(0xCCCCCC) 736 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 737 Button('Rounded rectangle Rounded rectangle Rounded rectangle Rounded rectangle') 738 .type(ButtonType.ROUNDED_RECTANGLE) 739 .backgroundColor(0x317aff) 740 .width(180) 741 //.buttonStyle(ButtonStyleMode.NORMAL) 742 .labelStyle({overflow:TextOverflow.Ellipsis, maxLines:3, minFontSize: 0}) 743 } 744 }.height(400).padding({ left: 35, right: 35, top: 35 }) 745 } 746} 747``` 748 749
