# Button >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. The **** component represents a component that can trigger actions. ## Required Permissions None ## Child Components This component can contain a single child component. ## 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)