Overview

The Button component serves as a fundamental interactive element in HarmonyOS applications, enabling users to trigger actions and submit data. This guide covers the essential features and implementation patterns for working with Button components in ArkUI.

Core Functions

The Button component provides several key capabilities:

• Action triggering: Executes specified operations when clicked, such as form submission, search execution, or page navigation
• Data submission: Sends user input to servers for processing
• Command execution: Invokes system or application-level commands like printing, saving, or exiting
• Event handling: Fires custom events when combined with other components for complex interactions

Creating Buttons

Syntax

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
Button(options?: {type?: ButtonType, stateEffect?: boolean})

Basic Implementation

@Entry
@Component
struct MainView {
  build() {
    Column() {
      Button('Confirm', { type: ButtonType.Normal, stateEffect: true })
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)

      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Row() {
          Image($r('app.media.app_icon')).width(20).height(40).margin({ left: 12 })
          Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
        }.alignItems(VerticalAlign.Center)
      }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
    }
  }
}

Button Types

HarmonyOS supports multiple button types that serve different UI purposes:

@Entry
@Component
struct ButtonTypes {
  build() {
    Column() {
      Button('Disabled', { type: ButtonType.Capsule, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(40)

      Button('Circle', { type: ButtonType.Circle, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)

      Button('Normal', { type: ButtonType.Normal, stateEffect: false })
        .backgroundColor(0x317aff)
        .width(90)
        .height(90)
    }
  }
}

Important: The borderRadius property cannot override the border radius for Circle-type buttons.

Custom Styling

Buttons support extensive styling customization to match application design requirements:

@Entry
@Component
struct StyledButtons {
  build() {
    Column() {
      Button('rounded corners', { type: ButtonType.Normal })
        .borderRadius(20)
        .height(40)

      Button('text style', { type: ButtonType.Normal })
        .fontSize(20)
        .fontColor(Color.Pink)
        .fontWeight(800)

      Button('colored button').backgroundColor(0xF55A42)

      Button({ type: ButtonType.Circle, stateEffect: true }) {
        Image($r('app.media.ic_public_refresh')).width(30).height(30)
      }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
    }
  }
}

Event Handling

Attach click handlers to respond to user interactions:

Button('Confirm', { type: ButtonType.Normal, stateEffect: true })
  .onClick(() => {
    console.info('Button clicked')
  })

Practical Applications

Page Navigation

Use buttons to navigate between application pages:

import router from '@ohos.router';

@Entry
@Component
struct NavigationExample {
  build() {
    List({ space: 4 }) {
      ListItem() {
        Button("Home").onClick(() => {
          router.pushUrl({ url: 'pages/home_page' })
        }).width('100%')
      }
      ListItem() {
        Button("Settings").onClick(() => {
          router.pushUrl({ url: 'pages/settings_page' })
        }).width('100%')
      }
      ListItem() {
        Button("Profile").onClick(() => {
          router.pushUrl({ url: 'pages/profile_page' })
        }).width('100%')
      }
    }.listDirection(Axis.Vertical)
    .backgroundColor(0xDCDCDC).padding(20)
  }
}

Form Submission

Buttons commonly handle form data submission workflows, alloiwng users to confirm and send their input for server processing.

Common Use Cases

• Form submistion: Submit user-entered data for server processing
• Navigation: Redirect to specific pages or external links
• Dialog control: Open or close modal dialogs
• Action execution: Trigger specific operations like page refresh or media playback
• State toggling: Switch application states such as menus, language, or theme

The Button component adapts to virtually any user interaction scenario in HarmonyOS applications.