Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


The StyledButton has a gradient, radius and border and an optional flatStyle, ready to be published in games & apps. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.3.0



Detailed Description

The StyledButton is a skinned Qt Quick Controls Button that has the same style across platforms: a white-to-grey gradient, black textColor, 4px radius and a dark-grey border color. You can also set the flatStyle property to true to get a button without border color and no gradient.

You can use this button in published games as it looks more polished than the SimpleButton. It changes its background color when the button is hovered (only works on Desktop with a mouse input) and when the button is pressed.

The default size values for StyledButton are the size of the contained text. So the longer the text, the bigger the StyledButton is. You can change the default size and behavior of the StyledButton by creating a new qml file that has the StyledButton as root element and then change your default button style. This custom component can then be used in your game during development, so you can quickly change all your button appearances afterwards.

Alternative button components are GameButton and SimpleButton. See this table when to use which button type:

Button Type Usage
SimpleButton A one-color button without radius or gradient to use during development.
StyledButton A button with a radius, gradient and border. Also has a flatStyle with no border, no gradient and smaller radius.
GameButton The GameButton wraps the QtQuick Controls Button and styles it with the GameStyle.

All of these button types can be customized by setting a style.

Example Usage

 import Felgo 3.0

 GameWindow {

   Scene {

     StyledButton {
       text: "Toggle Physics"

       onClicked {
         // .. enter code for toggling physics settings here ..


Button Styling

The StyledButton provides several properties that make most popular styling requirements easier without setting an own ButtonStyle.

Example for Simple Button Styling:

 import Felgo 3.0

 StyledButton {

   // these are the default values, change the ones youÄd like to change
   color: "#ccc"
   textColor: "black"
   gradientTopColorLighterFactor: 1.15
   radius: 4
   borderWidth: activeFocus ? 2 : 1
   borderColor: "#888"

For more advanced styling, assign a ButtonStyle to the style property.

Example for Advanced Button Styling:

 import Felgo 3.0
 import QtQuick 2.0
 import QtQuick.Controls.Styles 1.0

 StyledButton {
   id: styledButton

   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" }

     label: Text {
       anchors.centerIn: parent
       font.pixelSize: styledButton.pixelSize
       color: styledButton.textColor
       text: styledButton.text

Property Documentation

borderColor : color

The border color of the background rectangle.

The default value is a grey color with code "#888".

borderWidth : int

The border color of the background rectangle.

The default value is 2 if the button has focus, otherwise 1.

flatStyle : bool

Set this property to enable a flat style, which has these changes:

  • No color gradient.
  • No border.

The default value is false, so there is no flat style used.

Especially for mobile UIs, flat styles are sometimes preferable.

gradientBottomColor : color

The color at the bottom of the color gradient.

The default value is color.

See also gradientTopColor.

gradientTopColor : color

The color at the top of the color gradient.

The default value is Qt.lighter(color, gradientTopColorLighterFactor).

See also gradientTopColorLighterFactor and gradientBottomColor.

gradientTopColorLighterFactor : real

The gradientTopColor is made ligther by this factor for the top of the used color gradient.

The default value is 1.15.

To disable the gradient, set this factor to 1.

See also gradientTopColor and color.

radius : int

The background rectangle radius.

The default value is 4.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded