Qt Documentation

Contents

ButtonStyle QML Type

Provides custom styling for Button. More...

Import Statement: import QtQuick.Controls.Styles 1.4
Since: Qt 5.1

Properties

Detailed Description

You can create a custom button by replacing the "background" delegate of the ButtonStyle with a custom design.

Example:

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

If you need a custom label, you can replace the label item.

Property Documentation

background : Component

This defines the background of the button.


[read-only] control : Button

The Button this style is attached to.


label : Component

This defines the label of the button.


© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.