一、Button
Button组件主要用来响应点击操作，可以包含子组件。
示例代码：
@Entry
@Component
struct Index {build() {Row() {Column() {Button('确定', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}
效果图：
二、设置按钮样式
type用于定义按钮样式，示例代码中ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。
我们可以设置多种样式的Button，除了Capsule可以以设置Normal和Circle：
代码：
@Entry
@Component
struct Index {build() {Row() {Column() {Button('确定', { type: ButtonType.Normal, stateEffect: true }).width('90%').height(50).fontSize(20).backgroundColor('#007DFF')Blank(10)Button('确定1', { type: ButtonType.Capsule, stateEffect: true }).width('90%').height(50).fontSize(20).backgroundColor('#007DFF')Blank(10)Button('确定', { type: ButtonType.Circle, stateEffect: true }).width('90%').height(100).fontSize(20).backgroundColor('#007DFF')}.width('100%')}.height('100%')}
}
- Capsule：胶囊型按钮（圆角默认为高度的一半）。
- Circle：圆形按钮。
- Normal：普通按钮（默认不带圆角）。
三、设置按钮点击事件
可以给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。
Button('登录', { type: ButtonType.Capsule, stateEffect: true })....onClick(() => {// 处理点击事件逻辑})
四、包含子组件
Button组件可以包含子组件，让您可以开发出更丰富多样的Button，下面的示例代码中Button组件包含了一个Image组件：
Button({ type: ButtonType.Circle, stateEffect: true }) {Image($r('app.media.icon_delete')).width(30).height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)
效果图如下：
