Important: Please read the Qt Code of Conduct -

Qt Quick Controls 2: Same background, multiple buttons

  • Hi all,

    I got a few buttons and all got the same background. Now in every button there is this code:

    background: Rectangle{
        implicitHeight: x;
        implicitWidth: y;
        color: button.pressed ? "lightgray" : "white";

    Is it possible, like in Qt Quick Controls, to define a single background rectangle and apply it to all buttons?

  • Hi,
    You just have to create a new reusable file, exemple BackGround.qml (uppercase 'B ' is important to be able to reuse this component)

    like this :

    import QtQuick 2.0

    Rectangle {
    color :backMouse.pressed? "red" : "green"
    anchors.fill: parent
    anchors.fill: parent



    using :

    text: "btn 3"
    background: Back{} // Back is our reusable component

    i hope it helps you,


  • @guy-incognito Either what LeLev said, or you can make a custom Button component and reuse that. If there are many customized but identical parts in your buttons it makes sense to customize the whole Button, otherwise it's reasonable to customize only the background.

    This is actually a very common thing in Controls 2, everything is customized that way. Each type's documentation has also "Customizing X" link.

  • Thanks to both of you!

Log in to reply