Button

Standard Ubuntu button. More...

Inherits AbstractButton

Properties

Detailed Description

See also the Design Guidelines on Buttons.

Examples:

Column {
    Button {
        text: "Send"
        onClicked: print("clicked text-only Button")
    }
    Button {
        iconSource: "icon.png"
        gradient: UbuntuColors.greyGradient
        onClicked: print("clicked icon-only Button")
    }
    Button {
        iconSource: "icon.png"
        text: "Icon on left"
        iconPosition: "left"
        onClicked: print("clicked text and icon Button")
    }
}

An Action can be used to specify clicked, iconSource and text. Example:

 Item {
     Action {
         id: action1
         text: "Click me"
         onTriggered: print("action!")
         iconSource: "icon.png"
     }
     Button {
         anchors.centerIn: parent
         action: action1
         color: UbuntuColors.warmGrey
     }
}

Property Documentation

action : Action

The Action associated with this ActionItem. If action is set, the values of the Action properties are copied to the values of the ActionItem properties.


color : color

The background color of the button.

See also gradient.


gradient : Gradient

The gradient used to fill the background of the button.

Standard Ubuntu gradients are defined in UbuntuColors.

If both a gradient and a color are specified, the gradient will be used.

See also color.


hovered : bool

True if the mouse cursor hovers over the button's mouse area.


iconPosition : string

The position of the icon relative to the text. Options are "left" and "right". The default value is "left".

If only text or only an icon is defined, this property is ignored and the text or icon is centered horizontally and vertically in the button.

Currently this is a string value. We are waiting for support for enums: https://bugreports.qt-project.org/browse/QTBUG-14861


iconSource : url

The image associated with the actionItem. Default value: action.iconSource.


pressed : bool

True if the user presses a mouse button in the button's mouse area.


style : Component

Component instantiated immediately and placed below everything else.


text : string

The title of the actionItem. Default value: action.text