Help with buttons please

Circuits

Design issues:

I am building a setup wizard and I am looking for some suggestions and some help with how to implement the buttons. Currently, the wizard has three buttons:

"Cancel" (blue)
"Save and Exit" (blue)
"Next" which changes to "Finished" on the last page. (blue unless they don't have the option of clicking it in which case it is gray because it is disabled)

I feel like each button should be a different color perhaps? For instance, "Cancel" could be red, "Save and Exit" could be gray and "Next" could be green. However, since the "Next" button can be gray when it isn't allowed to be clicked I don't want the user thinking that "Save and Exit" isn't allowed to be clicked when it is. So perhaps "Cancel" should be red and both "Save and Exit" and "Next" should be green? Perhaps I should have a color change when hovered or clicked?

Functionality issues:

Here is an example of what I can figure out with Button

Button
{
  id: cancelButton
  width: 150
  height: 50
  contentItem: Text
  {
    text: qsTr("Cancel")
    font: theme ? theme.pushButton.font : internal.font
    color: "white"
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
  }
  background: Rectangle
  {
    radius: 5
    color: cancelButton.down ? "blue" : "red"
  }
  onClicked:
  {
    //on clicked logic goes here
  }
}

Currently I am not using the color switch shown in Rectangle but I could if it is suggested. The only thing I can't figure out how to do is alter the color of the text or rectangle when the button is being hovered, how might I do that? Is it even possible?

fcarney

There might be another way, but I use a mousearea for that:
https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#hoverEnabled-prop

Circuits

@fcarney Works for me, thanks!

IntruderExcluder

QuckControls 2 already have hovered and hoverEnabled properties, using MouseArea is unnecessary.

Circuits

@IntruderExcluder Right, I noticed that as well and am not using mouseArea.