Invalid property "style" for Button - qt

Question

Why am I getting this error: invalid property "style" every time I use the style property?
Button {
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}

Answer 1

Assuming you are using QtQuick.Controls.Button, you can use the following:
Button {
id: control
text: "A button"
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
If you are using this definition repeatedly, you can put it (with text: "A button") in a separate file, which you can call MyButton.qml, then you can use MyButton { text: "A Button" }

Answer 2

Gray is the default color of a button in qml. If you would like to style it this is an option I use frequently. Create a rectangle child component of button, set anchors.fill, and then set a color on the rectangle. This will be the color of your button now.

Answer 3

You can use Rectangle, Text and MouseArea Components to create button. By this way, there is no need style. You can do it like,
Rectangle{
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
Text{
anchors.centerIn: parent
text: qsTr("A button")
}
MouseArea{
id: control
anchors.fill: parent
onClicked: {
//Your Button Function
}
}
}