Back to Doc.qt.io
Contact Us Blog Download Qt
On this page

AbstractStylableControls QML Type

Abstract base type containing the control types that can be styled. More...

Import Statement: import Qt.labs.StyleKit
Inherited By:

AbstractStyle, Style, StyleVariation, and Theme

Status: Technology preview

This type is in technology preview and is subject to change.

Properties

Detailed Description

AbstractControls is an abstract base type. It contains a ControlStyle for each control type that can be styled by a Style, Theme, or StyleVariation.

The control types form a hierarchy where properties set on a base type propagate down to the more specific ones. For example, assigning a radius of four to abstractButton.background.radius will cause all button types, such as button, checkBox, and radioButton, to get a radius of four.

The snippets on this page illustrate a few of the key properties that can be used to style each control type, but they are by no means exhaustive. Many other properties are available, as documented in the ControlStyle and DelegateStyle documentation. In practice, some of them can also be omitted because the fallback style already supplies sensible defaults. This means that if you simply remove a property from one of the snippets, it might not actually affect its appearance, since it will just be read from the fallback style instead.

Note: Types in Qt.labs modules are not guaranteed to remain compatible in future versions.

Property Documentation

abstractButton : ControlStyle

Grouped property for styling all button-like controls, including Button, CheckBox, RadioButton, and Switch. Unset properties fall back to control.

abstractButton.background.radius: 4 // all buttons get a radius of 4
checkBox.indicator.radius: 2 // except check boxes, which get a radius of 2

See also Control Types.

applicationWindow : ControlStyle

Grouped property for styling ApplicationWindow.

Unset properties fall back to control.

Use applicationWindow to set the background color of the window:

light: Theme {
    applicationWindow.background.color: "#f0f0f0"
}
dark: Theme {
    applicationWindow.background.color: "#404040"
}

Note: The application needs to use ApplicationWindow, not Window, for this to take effect.

button : ControlStyle

Grouped property for styling Button.

Unset properties fall back to abstractButton.

button {
    background {
        implicitWidth: 120
        implicitHeight: 40
        shadow {
            opacity: 0.6
            color: "gray"
            verticalOffset: 2
            horizontalOffset: 2
        }
        color: "cornflowerblue"
        gradient: Gradient {
            // The gradient is drawn on top of the 'background.color', so
            // we use semi-transparent stops to give the button some shading
            // while letting the base color show through. This makes it easier
            // to change the color, but keep the shading, in the hovered state below.
            GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
            GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
        }
    }
    text.color: "white"
    hovered.background.color: "royalblue"
    pressed.background.scale: 0.95
}

checkBox : ControlStyle

Grouped property for styling CheckBox.

Unset properties fall back to abstractButton.

checkBox {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        color: "white"
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

comboBox : ControlStyle

Grouped property for styling ComboBox.

Unset properties fall back to control.

comboBox {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background.topLeftRadius: 4
    background.topRightRadius: 4

    indicator {
        // Show only the dropdown arrow, not the indicator background
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
            image.color: "black"
        }
    }
}

control : ControlStyle

Grouped property for styling all controls.

control is the base type in the control hierarchy, and properties set here serve as defaults for all other control types. For example, setting control.implicitWidth: 200 makes all controls 200 pixels wide, including buttons, scroll indicators and every other control. It also overrides any values inherited from a higher level in the style hierarchy (the Style for a Theme, or the fallbackStyle for a Style), including hover effects and other state-based behavior. Use control sparingly, and prefer more specific base types like abstractButton or pane when possible.

control {
    padding: 8
    background.radius: 4
}

flatButton : ControlStyle

Grouped property for styling flat buttons (buttons with no visible background in their normal state). The styling will take effect for a Button if Button.flat is set to true.

Unset properties fall back to abstractButton.

flatButton {
    // Hide background normally, show on hover
    background.visible: false
    hovered.background.visible: true
}

frame : ControlStyle

Grouped property for styling Frame.

Unset properties fall back to pane.

frame {
    background {
        color: "#fafafa"
        border.color: "#d0d0d0"
        radius: 4
    }
}

groupBox : ControlStyle

Grouped property for styling GroupBox.

Unset properties fall back to frame.

groupBox {
    // A group box is a container for other controls, so we give it some
    // padding to avoid the child controls to be too close to the border
    padding: 20

    // Move the label to the right, to match the radius of the background
    text.leftPadding: 6
    text.color: "darkslategray"

    background {
        // Move the frame down, below the text label
        topMargin: 30
        radius: 6
        color: "#f8f8f8"
        border.color: "#d0d0d0"
    }
}

itemDelegate : ControlStyle

Grouped property for styling ItemDelegate.

Unset properties fall back to control.

Note: In Qt Quick Controls, ItemDelegate inherits from AbstractButton. In StyleKit, however, itemDelegate falls back to control rather than abstractButton, since delegates are typically styled very differently from buttons (flat, no borders or drop shadows, etc.).

itemDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

label : ControlStyle

Grouped property for styling Label.

Unset properties fall back to control.

light: Theme {
    // Labels typically have no background, so set background.visible to false.
    // Alternatively, hiding the background for labels can be done once for all
    // themes by setting Style.label.background.visible: false.
    label.background.visible: false
    label.text.color: "black"
}
dark: Theme {
    label.background.visible: false
    label.text.color: "white"
}

page : ControlStyle

Grouped property for styling Page.

Unset properties fall back to pane.

page {
    background {
        color: "white"
        border.width: 0
    }
}

pane : ControlStyle

Grouped property for styling Pane.

Unset properties fall back to control.

pane {
    background {
        implicitWidth: 200
        implicitHeight: 200
        color: "white"
    }
}

Grouped property for styling Popup.

Unset properties fall back to control.

popup {
    background {
        color: "white"
        border.width: 1
        border.color: "darkslategray"
        radius: 4
    }
}

progressBar : ControlStyle

Grouped property for styling ProgressBar. For a progress bar, the groove is styled through the indicator, while the progress track is styled through the indicator's foreground.

Unset properties fall back to control.

progressBar {
    // Hide the background; show only the progress bar
    background.visible: false
    indicator {
        implicitWidth: 150
        implicitHeight: 8
        radius: 4
        color: "#e0e0e0"
        foreground {
            // Set margins to add some space between the progress track and the groove
            margins: 2
            color: palette.accent
            radius: 4
        }
    }
}

StyleKit doesn't provide a dedicated property to style the indeterminate animation of a progress bar. To change the animation, you need to implement a custom indicator foreground delegate instead:

progressBar {
    indicator {
        implicitWidth: 150
        implicitHeight: 8
        foreground {
            delegate: StyledItem {
                // Draw a pulsating progress track when in indeterminate mode, and a normal track otherwise
                width: control.indeterminate ? parent.width : parent.width * control.visualPosition
                height: parent.height
                opacity: control.indeterminate ? 0.1 : 1.0
                SequentialAnimation on opacity {
                    running: control.indeterminate
                    loops: Animation.Infinite
                    NumberAnimation { from: 0.1; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
                    NumberAnimation { from: 1.0; to: 0.1; duration: 500; easing.type: Easing.InOutQuad }
                }
            }
        }
    }
}

radioButton : ControlStyle

Grouped property for styling RadioButton.

Unset properties fall back to abstractButton.

radioButton {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        // Make the indicator circular
        radius: 255
        foreground {
            // The foreground circle is what shows the checked state, so we make
            // it a bit smaller than the outer circle by setting margins
            margins: 4
            radius: 255
            // Hide the foreground circle when the radio button is not checked
            visible: false
        }
    }

    // Show the foreground circle when the radio button is checked
    checked.indicator.foreground.visible: true
}

scrollBar : ControlStyle

Grouped property for styling ScrollBar. For a scroll bar, the groove is styled through the indicator, while the handle is styled through the indicator's foreground.

Unset properties fall back to control.

scrollBar {
    padding: 0
    background {
        // For scroll bars, we typically don't want a background, only a
        // draggable indicator and a groove.
        visible: false
        // Note: even if the background is hidden, its implicit size is still used to
        // determine the overall size of the scroll bar. So we set implicitHeight equal to
        // the height of the indicator, to make it appear on the side of, and not on top
        // of, the content area in a ScrollView. For a horizontal scroll bar, on the other
        // hand, the width is automatically set by the view to match its own width.
        implicitHeight: 10
    }
    indicator {
        radius: 255
        // For horizontal scroll bars, we only set the height. The width is set by the
        // view to be the relative size of the view's content that is currently visible.
        implicitHeight: 10
        color: "#c0c0c0"
        foreground.visible: false
    }
    vertical {
        // Override properties for vertical scroll bars if needed.
        // For vertical indicators, we only set width. The height is set by the
        // view to be the relative size of the view's content that is currently visible.
        indicator.implicitWidth: 10
        background.implicitWidth: 10
    }
}

scrollIndicator : ControlStyle

Grouped property for styling ScrollIndicator.

Unset properties fall back to control.

scrollIndicator {
     // For scroll indicators, we typically don't want a background, only a
     // sliding indicator
    background.visible: false
    indicator {
        // For horizontal indicators, we only set the height. The width is set by the
        // view to be the relative size of the view's content that is currently visible.
        implicitHeight: 5
        border.width: 0
        color: "cornflowerblue"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        // Override properties for vertical scroll indicators if needed
        indicator.color: "violet"
        // For vertical indicators, we only set width. The height is set by the
        // view to be the relative size of the view's content that is currently visible.
        indicator.implicitWidth: 5
    }
}

scrollView : ControlStyle

Grouped property for styling ScrollView.

ScrollView itself has no visual delegates to style. Its scroll bars can be styled separately through the scrollBar property. But you can use padding to control the space between the scroll bars and the content area.

Unset properties fall back to control.

scrollView {
    // Add some space between the scroll bars and the content area
    padding: 2
    // For the sake of the example, style the scroll bars in a ScrollView
    // differently from the default scroll bars by using a StyleVariation.
    variations: StyleVariation {
        scrollBar.indicator.color: "cornflowerblue"
    }
}

slider : ControlStyle

Grouped property for styling Slider. For a slider bar, the groove is styled through the indicator, while the progress track is styled through the indicator's foreground. Unset properties fall back to control.

slider {
    background.visible: false

    indicator {
        // The groove of the slider should fill out the entire width of
        // the control, which we achieve by setting implicitWidth to Style.Stretch.
        implicitWidth: Style.Stretch
        implicitHeight: 8
        radius: 255
        color: "#e0e0e0"
        foreground {
            radius: 255
            color: palette.accent
        }
    }

    handle {
        implicitWidth: 24
        implicitHeight: 24
        radius: 255
        color: "white"
        border.color: "#c0c0c0"
    }

    vertical {
        // if needed, you can override properties for vertical sliders
    }
}

spinBox : ControlStyle

Grouped property for styling SpinBox.

Unset properties fall back to control.

spinBox {
    // Center the text between the up/down buttons
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
            image.color: "black"
            alignment: Qt.AlignCenter
        }
        // Place the down and up buttons on the left and right side of the control
        down {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
        up {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
    }
}

Note: It's currently only possible to position the up and down buttons to be on the left or right side of the control, but not on top of each other.

switchControl : ControlStyle

Grouped property for styling Switch.

Unset properties fall back to abstractButton.

switchControl {
    // For a switch control, we typically don't want a background, only an indicator with a handle
    background.visible: false
    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }
    checked.indicator.foreground.visible: true
    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        implicitWidth: 20
        implicitHeight: 20
        radius: 255
        color: "white"
    }
}

tabBar : ControlStyle

Grouped property for styling TabBar.

Unset properties fall back to pane.

tabBar {
    padding: 0
    spacing: -1 // let tab buttons overlap slightly
    background {
        color: "white"
        border.width: 0
    }
}

tabButton : ControlStyle

Grouped property for styling TabButton.

Unset properties fall back to abstractButton.

tabButton {
    background {
        radius: 0
        topLeftRadius: 4
        topRightRadius: 4
        color: "#e8e8e8"
    }
    checked.background.color: "white"
}

textArea : ControlStyle

Grouped property for styling TextArea.

Unset properties fall back to textInput.

textArea {
    // Add some space between the text and the border of the text area
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textField : ControlStyle

Grouped property for styling TextField.

Unset properties fall back to textInput.

textField {
    // Add some space between the text and the border of the text field
    padding: 8
    text.alignment: Qt.AlignVCenter
    background {
        implicitWidth: 150
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textInput : ControlStyle

Grouped property for styling all text input controls, including TextField and TextArea.

Unset properties fall back to control.

textInput {
    // Add some space between the text and the border of the text input
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.width: 1
        border.color: "#c0c0c0"
    }
}

toolBar : ControlStyle

Grouped property for styling ToolBar.

Unset properties fall back to pane.

toolBar {
    spacing: 2
    background {
        radius: 0
        implicitHeight: 40
        border.width: 1
    }
}

toolButton : ControlStyle

Grouped property for styling ToolButton.

Unset properties fall back to abstractButton.

toolButton {
    background.radius: 0
}

toolSeparator : ControlStyle

Grouped property for styling ToolSeparator.

Unset properties fall back to control.

toolSeparator {
    background.visible: false
    indicator {
        implicitWidth: 30
        implicitHeight: 1
        border.width: 0
        color: "#c0c0c0"
        foreground.visible: false
    }
    vertical {
        // Override properties for vertical tool separators if needed.
        // Note: Qt Quick Controls automatically swaps the width and height
        // for vertical tool separators, so avoid doing that here.
    }
}

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.