Standard Ubuntu button. More...

Import Statement: import Ubuntu.Components 1.3



Detailed Description


Column {
Button {
text: "Send"
onClicked: print("clicked text-only Button")
Button {
iconName: "compose"
gradient: UbuntuColors.greyGradient
onClicked: print("clicked icon-only Button")
Button {
iconName: "compose"
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!")
iconName: "compose"
Button {
anchors.centerIn: parent
action: action1
color: UbuntuColors.warmGrey

Property Documentation

color : color

The background color of the button.

See also gradient.

font : font

The font used for the button's text.

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.

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

strokeColor : color

If set to a color, the button has a stroke border instead of a filled shape.

This QML property was introduced in Ubuntu.Components 1.1.