Change Font Size of Button in Qt QML

Question

How can the font size of the text in a Button control be set in QML? The designer has not option, and 'font' is not a valid property of Button.

Button {
    id: cmdQuit
    text: qsTr("Quit")
    width: 64
    height: 32
}

Solution 1

You set the Button's style property:

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
  id: container
  width: 800
  height: 800

  Button {
    id: cmdQuit
    text: qsTr("Quit")
    width: 64
    height: 32
    style: ButtonStyle {
      label: Text {
        renderType: Text.NativeRendering
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.family: "Helvetica"
        font.pointSize: 20
        color: "blue"
        text: control.text
      }
    }
  }
}

Solution 2

For QtQuick 2, you have to use the contentItem property as shown here: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button

import QtQuick 2.12
import QtQuick.Controls 2.12

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

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

Solution 3

This is an old question, but since it comes first in search engines I'm providing an update on the situation.

For QtQuick2, unlike what Chris said, you don't need to use the contentItem property anymore. You can access the font property directly from Button.

Example:

Button {
    id: btn
    text: "Test"
    font.pixelSize: 18
}

Comments

[SCP3008]

With Pyside6/Qt6 I don't think using style property like in the accepted answer is supported, nor is the QtQuick.Controls.Styles module available anymore.