1# Button 2 3 4> **NOTE**<br>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 5> 6 7 8The **<Button>** component represents a component that can trigger actions. 9 10 11## Required Permissions 12 13None 14 15 16## Child Components 17 18Supported 19 20 21## APIs 22 23- Button(options?: {type?: ButtonType, stateEffect?: boolean}) 24 25 **Table 1** options parameters 26 27 | Name | Type | Mandatory | Default Value | Description | 28 | -------- | -------- | -------- | -------- | -------- | 29 | type | ButtonType | No | Capsule | Button type. | 30 | stateEffect | boolean | No | true | Whether to enable the state switchover effect when a button is pressed. When the state is set to **false**, the state switchover effect is disabled. | 31 32 33- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean }) 34 35 Creates a button component based on text content. In this case, the **<Button>** component cannot contain child components. 36 37 **Table 2** value parameters 38 39| Name | Type | Mandatory | Default Value | Description | 40| -------- | -------- | -------- | -------- | -------- | 41| label | string | No | - | Button text. | 42| options | Object | No | - | For details, see the **options** parameters. | 43 44 45## Attributes 46 47| Name | Type | Default Value | Description | 48| -------- | -------- | -------- | -------- | 49| type | ButtonType | Capsule | Button type. | 50| stateEffect | boolean | true | Whether to enable the state switchover effect. When the state is set to **false**, the state switchover effect is disabled. | 51 52- ButtonType enums 53 | Name | Description | 54 | -------- | -------- | 55 | Capsule | Capsule-type button (the round corner is half of the height by default). | 56 | Circle | Circle button. | 57 | Normal | Normal button (without rounded corners by default). | 58 59>  **NOTE** 60> - The rounded corner of a button is set by using [Border](ts-universal-attributes-border.md). (The rounded corner cannot be set by using a border API.) 61> - When the button type is **Capsule**, the **borderRadius** settings do not take effect, and the rounded corner of the button is always half of the button height. 62> - When the button type is **Circle**, the value of **borderRadius** is used as the button radius. If **borderRadius** is not set, the button radius is half of the width or height, whichever is smaller. 63> - The button text is set using the [common text style](ts-universal-attributes-text-style.md). 64 65 66## Example 67 68 69``` 70@Entry 71@Component 72struct ButtonExample { 73 build() { 74 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 75 Text('Common button').fontSize(9).fontColor(0xCCCCCC) 76 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 77 Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) 78 Button({ type: ButtonType.Normal, stateEffect: true }) { 79 Row() { 80 Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) 81 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 82 }.alignItems(VerticalAlign.Center) 83 }.borderRadius(8).backgroundColor(0x317aff).width(90) 84 Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5) 85 .borderRadius(8).backgroundColor(0x317aff).width(90) 86 } 87 88 Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) 89 Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { 90 Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) 91 Button({ type: ButtonType.Capsule, stateEffect: true }) { 92 Row() { 93 Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) 94 Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) 95 }.alignItems(VerticalAlign.Center).width(90) 96 }.backgroundColor(0x317aff) 97 .onClick((event: ClickEvent) => { 98 AlertDialog.show({ message: 'The login is successful' }) 99 }) 100 Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5) 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 Image($r('app.media.ic_public_app_filled')).width(20).height(20) 108 }.width(55).height(55).backgroundColor(0x317aff) 109 Button({ type: ButtonType.Circle, stateEffect: true }) { 110 Image($r('app.media.ic_public_delete_filled')).width(30).height(30) 111 }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) 112 } 113 }.height(400).padding({ left: 35, right: 35, top: 35 }) 114 } 115} 116``` 117 118 119
