QML Button Element

A Button component has a label and click event handling. More...

Inherited by SheetButton, TabButton, and ToolButton.

This element was introduced in qt-components 4.7.

List of all members, including inherited members

Properties

checkable : bool
checked : bool
enabled : bool
iconSource : url
platformMouseAnchors : variant
platformStyle : QtObject
pressed : bool
text : string

Signals

clicked

Detailed Description

The Button is a component that accepts user input and sends a clicked signal for the application to handle. The Button has resizable properties, event handling, and it can undergo state changes and transitions.

Note that you can put inside this components icons with size up to 40x40 pixels, but the preffered size is 32x32 pixels.

 // Create a button with different icon states
 Button {
     text: "Icon state button"
     iconSource: "assets/icon_" + (pressed ? "pressed" : "normal") + ".png"
 }
 // This approach works for all supported states: normal, disabled, pressed, selected, selected && disabled

Property Documentation

checkable : bool

Property default is false

If a button's checkable property is set to true, then it can have two alternative checked states, on or off. If the button is checked, then checked is true. The checkable and Button::checked properties are set to false by default.

         Button {
             id: button1
             width: 200; height: 50
             text: "Checkable"
             checkable: true
             onClicked: output = text + " clicked"

         }

checked : bool

Property default is false

Specify the checked state. It only works if Button::checkable is set to true

enabled : bool

Property default is true

Enables or disables the component. Notice that the disable state is not Toolkit compliant but is supported on qt-components as well.

         Button {
             id: button3
             width: 200; height: 50
             text: "Disabled"
             enabled: false
             onClicked: output = text + " clicked"
         }

iconSource : url

Property default is ""

The path to the icon image to be used. To have a different icon for the checked state, write:

 iconSource: (checked) ? "path to icon checked" : "path to normal icon"

platformMouseAnchors : variant

Platform specific access to button's mouse area anchors. The mouse area is used to listen to users click events.

platformStyle : QtObject

Property default is ButtonStyle{}

Property for styling the component. Set one of the following style elements:

ButtonStyle{ inverted: true } - Used on dark background

See also ButtonStyle.

pressed : bool

(ReadOnly) Is true when the button is pressed.

text : string

Property default is ""

The text displayed on button.

Signal Documentation

Button::clicked ()

Signal for detecting button clicks. If the button is pressed and released, then this signal is emitted.

The signal handler, onClicked(), can bind to state changes or other actions.

Contents