Provides custom styling for Button. More...

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


Detailed Description

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


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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support