How to set style of button in qml?

Pyroxar

I read the documentation about this but my code not work.
http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls.Material 2.1
import QtQuick.Layouts 1.0
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3


ApplicationWindow {
    visible: true
    width: 360
    height: 640
    title: qsTr("Hello World")

    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" }
                }
            }
        }
    }
}

I have a error.
QQmlApplicationEngine failed to load component
qrc:/main.qml:21 Cannot assign to non-existent property "style"

What happened?

Hi! You're importing QtQuick.Controls 2. So your Button is from Controls 2. But styles are only for buttons from Controls 1. See Button QML Type, and Customizing Button for the Controls 2 / Button doc pages.

rowild

In my opinion this should be made a lot clearer in the various parts of the documentation...

sierdzio

@rowild said in How to set style of button in qml?:

In my opinion this should be made a lot clearer in the various parts of the documentation...

Yeah, it's a very common issue which requires "insider knowledge".

Thankfully, once Qt 6 comes out, Controls 1 will vanish completely so it will stop being an issue.

Solved How to set style of button in qml?