# Button Provides the button component. ## Required Permissions None ## Child Component This component can contain child components. ## APIs - Button\(options?: \{type?: ButtonType, stateEffect?: boolean\}\) **Table 1** **options** parameters

Name

Type

Mandatory

Default Value

Description

type

ButtonType

No

Capsule

Button type.

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.

- Button\(label?: string, options?: \{ type?: ButtonType, stateEffect?: boolean \}\) Creates a button component based on text content. In this case, the **** component cannot contain subcomponents. **Table 2** **value** parameters

Name

Type

Mandatory

Default Value

Description

label

string

No

-

Button text.

options

Object

No

-

For details, see the options parameters.

## Attributes

Name

Type

Default Value

Description

type

ButtonType

Capsule

Button type.

stateEffect

boolean

true

Whether to enable the state switchover effect. When the state is set to false, the state switchover effect is disabled.

- ButtonType enums

Name

Description

Capsule

Capsule-type button (the round corner is half of the height by default).

Circle

Circle button.

Normal

Normal button (without rounded corners by default).

>![](../../public_sys-resources/icon-note.gif) **NOTE:** >- The rounded corner of a button is set by using [**borderRadius**](ts-universal-attributes-border.md). \(The rounded corner cannot be set by using a border API.\) >- The button text is set using the [common text style](ts-universal-attributes-text-style.md). ## Example ``` @Entry @Component struct ButtonExample { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Text('Common button').fontSize(9).fontColor(0xCCCCCC) Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Button('Ok', { type: ButtonType.Normal, stateEffect: true }).borderRadius(8).backgroundColor(0x317aff).width(90) Button({ type: ButtonType.Normal, stateEffect: true }) { Row() { Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) }.alignItems(VerticalAlign.Center) }.borderRadius(8).backgroundColor(0x317aff).width(90) Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.5) .borderRadius(8).backgroundColor(0x317aff).width(90) } Text('Capsule button').fontSize(9).fontColor(0xCCCCCC) Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { Button('Ok', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90) Button({ type: ButtonType.Capsule, stateEffect: true }) { Row() { Image($r('app.media.loading')).width(20).height(20).margin({ left: 12 }) Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 }) }.alignItems(VerticalAlign.Center).width(90) }.backgroundColor(0x317aff) .onClick((event: ClickEvent) => { AlertDialog.show({ message: 'The login is successful' }) }) Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.5) .backgroundColor(0x317aff).width(90) } Text('Circle button').fontSize(9).fontColor(0xCCCCCC) Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_app_filled')).width(20).height(20) }.width(55).height(55).backgroundColor(0x317aff) Button({ type: ButtonType.Circle, stateEffect: true }) { Image($r('app.media.ic_public_delete_filled')).width(30).height(30) }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42) } }.height(400).padding({ left: 35, right: 35, top: 35 }) } } ``` ![](figures/button.gif)