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**API 1:** Button(options?: {type?: ButtonType, stateEffect?: boolean}) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name | Type | Mandatory | Description | 24| ----------- | ---------- | ------| --------------------------------- | 25| type | ButtonType | No | Button type.<br>Default value: **ButtonType.Capsule** | 26| 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 aaplied based on the state style.| 27 28**API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) 29 30Creates a button component based on text content. In this case, the component cannot contain child components. 31 32Since API version 9, this API is supported in ArkTS widgets. 33 34**Parameters** 35 36| Name | Type | Mandatory | Description | 37| ------- | ----------------------------------- | ---- | ------------- | 38| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text.| 39| options | { type?: ButtonType, stateEffect?: boolean } | No | See parameters of API 1.| 40 41## Attributes 42 43In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 44 45| Name | Type | Description | 46| ----------- | ----------- | --------------------------------- | 47| type | ButtonType | Button type.<br>Default value: **ButtonType.Capsule**<br>Since API version 9, this API is supported in ArkTS widgets.| 48| stateEffect | boolean | 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>Since API version 9, this API is supported in ArkTS widgets.| 49 50## ButtonType 51 52Since API version 9, this API is supported in ArkTS widgets. 53 54| Name | Description | 55| ------- | ------------------ | 56| Capsule | Capsule-type button (the round corner is half of the height by default).| 57| Circle | Circle button. | 58| Normal | Normal button (without rounded corners by default). | 59 60> **NOTE** 61> - The rounded corner of a button is set by using [borderRadius](ts-universal-attributes-border.md), rather than by using the **border** API. Only a rounded corner whose parameter is [Length](ts-types.md#length) is supported. 62> - 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. 63> - For a button of the **Circle** type, its radius is the value of **borderRadius** (if set) or the width or height (whichever is smaller). 64> - The button text is set using the [text style attributes](ts-universal-attributes-text-style.md). 65> - Before setting the [gradient color](ts-universal-attributes-gradient-color.md), you need to set [backgroundColor](ts-universal-attributes-background.md) to transparent. 66 67 68The [universal events](ts-universal-events-click.md) are supported. 69## Example 70 71### Example 1 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct ButtonExample { 78 build() { 79 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 80 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 81 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 82 Button('OK', { type: ButtonType.Normal, stateEffect: true }) 83 .borderRadius(8) 84 .backgroundColor(0x317aff) 85 .width(90) 86 .onClick(() => { 87 console.log('ButtonType.Normal') 88 }) 89 Button({ type: ButtonType.Normal, stateEffect: true }) { 90 Row() { 91 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 92 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 93 }.alignItems(VerticalAlign.Center) 94 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 95 96 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 97 .borderRadius(8).backgroundColor(0x317aff).width(90) 98 } 99 100 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 101 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 102 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 103 Button({ type: ButtonType.Capsule, stateEffect: true }) { 104 Row() { 105 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 106 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 107 }.alignItems(VerticalAlign.Center).width(90).height(40) 108 }.backgroundColor(0x317aff) 109 110 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 111 .backgroundColor(0x317aff).width(90) 112 } 113 114 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 115 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 116 Button({ type: ButtonType.Circle, stateEffect: true }) { 117 LoadingProgress().width(20).height(20).color(0xFFFFFF) 118 }.width(55).height(55).backgroundColor(0x317aff) 119 120 Button({ type: ButtonType.Circle, stateEffect: true }) { 121 LoadingProgress().width(20).height(20).color(0xFFFFFF) 122 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 123 } 124 }.height(400).padding({ left: 35, right: 35, top: 35 }) 125 } 126} 127``` 128 129 130 131### Example 2 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct SwipeGestureExample { 138 @State count: number = 0 139 140 build() { 141 Column() { 142 Text(`${this.count}`) 143 .fontSize(30) 144 .onClick(() => { 145 this.count++ 146 }) 147 if (this.count <= 0) { 148 Button('count is negative').fontSize(30).height(50) 149 } else if (this.count % 2 === 0) { 150 Button('count is even').fontSize(30).height(50) 151 } else { 152 Button('count is odd').fontSize(30).height(50) 153 } 154 }.height('100%').width('100%').justifyContent(FlexAlign.Center) 155 } 156} 157``` 158 159 160
