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**| 27 28 29**API 2:** Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean }) 30 31 Creates a button component based on text content. In this case, the component cannot contain child components. 32 33Since API version 9, this API is supported in ArkTS widgets. 34 35**Parameters** 36 37| Name | Type | Mandatory | Description | 38| ------- | ----------------------------------- | ---- | ------------- | 39| label | [ResourceStr](ts-types.md#resourcestr) | No | Button text. | 40| options | { type?: ButtonType, stateEffect?: boolean } | No | See parameters of API 1.| 41 42 43## Attributes 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 enums 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 button-wide rounded corner setting is supported. 62> - For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and its rounded corner is always half of the button height. 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 66 67## Example 68 69```ts 70// xxx.ets 71@Entry 72@Component 73struct ButtonExample { 74 build() { 75 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 76 Text('Normal button').fontSize(9).fontColor(0xCCCCCC) 77 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 78 Button('OK', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) 79 Button({ type: ButtonType.Normal, stateEffect: true }) { 80 Row() { 81 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 82 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 83 }.alignItems(VerticalAlign.Center) 84 }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40) 85 86 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4) 87 .borderRadius(8).backgroundColor(0x317aff).width(90) 88 } 89 90 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 91 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 92 Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 93 Button({ type: ButtonType.Capsule, stateEffect: true }) { 94 Row() { 95 LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF) 96 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 97 }.alignItems(VerticalAlign.Center).width(90).height(40) 98 }.backgroundColor(0x317aff) 99 100 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4) 101 .backgroundColor(0x317aff).width(90) 102 } 103 104 Text('Circle button').fontSize(9).fontColor(0xCCCCCC) 105 Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { 106 Button({ type: ButtonType.Circle, stateEffect: true }) { 107 LoadingProgress().width(20).height(20).color(0xFFFFFF) 108 }.width(55).height(55).backgroundColor(0x317aff) 109 110 Button({ type: ButtonType.Circle, stateEffect: true }) { 111 LoadingProgress().width(20).height(20).color(0xFFFFFF) 112 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 113 } 114 }.height(400).padding({ left: 35, right: 35, top: 35 }) 115 } 116} 117``` 118 119 120
