Change the text color of a QML button

Question

I am new to QML and I want to personalize my buttons. I managed to change the background color and border color. But I am unable to change the color of the button text at all. I saw that we no longer use “style” to change the style, but “background”, and I don’t understand everything about it.

Thank you 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" }*/ } 

Answer 1

According to the document

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

Answer 2

If you just want to change the color of the text, it is best to use the html font style in your Button . This will hold the other Item as a button icon:

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

Answer 3

There is another way if you use QML styling.

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

The text of this button will be red, and the rest will follow the coloring of the material style.