Time for action – making the button clickable

Thus far, our component only looks like a button. The next task is to make it respond to mouse input. As you may have guessed, this is done by using the MouseArea item.

Add a MouseArea child item to the button and use anchors to make it fill the whole area of the button. Call the element buttonMouseArea. Put the following code in the body of the item:

Rectangle {
  id: button
  // ... 
  Row { ... }
  MouseArea {
    id: buttonMouseArea

    anchors.fill:parent
    onClicked: button.clicked()
  }
}

In addition to this, set the following declaration in the button object just after its ID is declared:

Rectangle {
  id: button

  signal clicked()
  // ...
}

To test the modification, add the following code at the end of the button object definition, just before the closing bracket:

onClicked: console.log("Clicked!")

Then, run the program and click on the button. You'll see your message printed to the Creator's console. Congratulations...