QML button change text color

Question

I'm new in QML and i want to personalize my buttons. I succeed to change the background's color and border color. But I don't success at all to change the color of the button's text. I saw we don't use anymore "style" to change the style but "background" and I don't understand everything about it.

Thanks for your help.

Button {
        id: buttonAC
        text: qsTr("AC")
        Layout.fillHeight: true
        Layout.fillWidth: true

        background: Rectangle {
            border.color: "#14191D"
            color: "#24292f"
            // I want to change text color next
        }

        /*Text {
            text: qsTr("AC")
            color: "#F54035"
        }*/
}

all you need is just to open [the documentation](http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button) or [this](http://doc.qt.io/qt-5/qml-qtquick-controls2-control.html#contentItem-prop) — folibis, Nov 27 '16 at 06:58
Thank you, it resolve my problem, i went on this documentation many times without retrieve the good information. But it was clearly said in the documentation. — Lazyos, Nov 27 '16 at 08:51
@folibis the if you change the `contentItem` the button will no longer have icon functionality which is a pain to deal with that stuff yourself because if you wont need an icon you will need to create another component or implement states.. — ניר, Jun 09 '22 at 10:59

score 20 · Answer 1 · answered Jun 01 '17 at 06:46

According to the doc

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    }
}

as was noted above, this won't work if you wish to display an icon as well as text. — mzimmers, Dec 30 '22 at 19:09

score 19 · Answer 2 · edited Sep 29 '20 at 22:00

The two fastest ways I found were to either use the following undocumented property:

Button {
     ....
     palette.buttonText: "white"
}

To go even further when customizing text colors during user interaction here is the ternary in the Button source code followed by a list of the properties to set accordingly:

color: control.checked || control.highlighted ? control.palette.brightText :
           control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText

Properties:

control.palette.brightText
control.palette.highlight
control.palette.windowText
control.palette.buttonText

The second dirty hack would be to use the onCompleted slot as follows:

Button {
     id: control
     ....
     Component.onCompleted: {
          control.contentItem.color = "white";
     }
}

Best answer, IMO. And palette.buttonText isn't completely undocumented: https://doc.qt.io/qt-6/qml-qtquick-palette.html — mzimmers, Dec 30 '22 at 19:51

score 6 · Answer 3 · edited Jan 07 '19 at 05:51

6

If you just wanna change your text color, may you use html font style in your Button would be better. This will keeping other Item like button icon:

Button
{
    //...
    text: "<font color='#fefefe'>" + moudle + "</font>"
    font.family: "Arial"
    font.pointSize: 24
    //...
}

edited Jan 07 '19 at 05:51

eyllanesc

235,170
19
170
241

answered Jan 07 '19 at 05:50

Crawl.W

403
5
17

amazing ! you rocks ! i have been fighting the last 15min to set the color of a ToggleButton/ToggleButtonStyle your method worked :) thanks – intika Feb 06 '19 at 17:21

score 6 · Answer 4 · edited Aug 09 '20 at 14:08

There is another way if you are using QML Styling. Replace 2.12 with your version of QML.

import QtQuick.Controls.Material 2.12    

Button {
    id: goToParenFolder
    text: "Hi"
    flat: true
    Material.foreground: "red"
}

This button's text will be in red and others will follow Material Style coloring.

To enable QML Styling and add the Material theme add QT += quickcontrols2 to your .pro file.

Also add #include <QQuickStyle> and QQuickStyle::setStyle("Material"); to main.cpp

score 0 · Answer 5 · answered Nov 11 '21 at 08:25

Button {
    id: control
    width: 290; height: 80
    opacity: down ? 0.6 : 1
    background: Rectangle {
        color: "#4DABFB"
        radius: 50
    }
    Text {
        id: controlText
        anchors.fill: parent
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        color: "#FFFFFF"
        text: "OK"
    }
}

I like use Text inside the Button, then you can change Text's color as you like.

QML button change text color

5 Answers5