API Documentation

Documentation for developing SailfishOS applications

Button QML Type

A push button with a text label More...

Import Statement: import Sailfish.Silica 1.0

Properties

Detailed Description

The Button type provides a Sailfish-styled button with a text label.

Here is a simple button:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 Button {
    text: "click me"
    onClicked: console.log("clicked!")
 }

Button inherits the QtQuick MouseArea type, so any properties, signals and methods of MouseArea (such as the onClicked handler in the example above) are also available to Button objects. See the MouseArea documentation for its full list of available properties, signals and methods.

It is not recommended to set the width of the button explicitly. Rather, set the preferredWidth property to the desired size so that the button can expand to accomodate the text if necessary.

Setting the height of a Button will increase the tappable area, but will not change the height of the visible button height.

Property Documentation

color : color

This property controls the color of the button and the related text.

See also highlightBackgroundColor and highlightColor.


down : bool

This property is true while the button is pressed and the touch position remains within the button area.

See also MouseArea::pressed.


highlightBackgroundColor : color

This property controls the color of the button when down is true.

See also highlightColor and color.


highlightColor : color

This property controls the color of the button text when down is true.

See also highlightBackgroundColor and color.


preferredWidth : real

This property controls the preferred size of the button. The following standard button sizes are defined:

  • Theme.buttonWidthExtraSmall - This is only used in a special case, where the width of all the button layout labels is limited and thus three buttons are expected to fit side by side on most system languages. Most applications should avoid using this variant.
  • Theme.buttonWidthSmall - this is the default size. At least two small buttons will fit side by side. On larger screens or in landscape orientation, more than two small buttons may fit across the screen.
  • Theme.buttonWidthMedium - depending upon the screen size and orientation, there may only be space for one medium button across the screen.
  • Theme.buttonWidthLarge - depending upon the screen size and orientation, there may only be space for one large button across the screen.

If the text supplied does not fit within the requested button size the button width will be increased to contain the text.


text : string

The text of the label shown within the button.


We use cookies to improve your user experience and to help us to develop our services. By continuing to browse the site, you approve of our use of cookies.