Button Controls#

Guidelines for button controls

Qt Quick Controls offers a selection of button-like controls.

qml-qtquick-controls-abstractbutton.html

Abstract base type providing functionality common to buttons.

qml-qtquick-controls-button.html

Push-button that can be clicked to perform a command or answer a question.

qml-qtquick-controls-checkbox.html

Check button that can be toggled on or off.

qml-qtquick-controls-delaybutton.html

Check button that triggers when held down long enough.

qml-qtquick-controls-radiobutton.html

Exclusive radio button that can be toggled on or off.

qml-qtquick-controls-roundbutton.html

A push-button control with rounded corners that can be clicked by the user.

qml-qtquick-controls-switch.html

Switch button that can be toggled on or off.

qml-qtquick-controls-toolbutton.html

Button with a look suitable for a ToolBar.

Each type of button has its own specific use case. The following sections offer guidelines for choosing the appropriate type of button, depending on the use case.

Button Control#

Button is a clickable control that starts an action, or opens or closes a popup. A button usually has a text label but it can also contain an icon.

Button is a very suitable control when a popup or dialog needs to perform an action. The most common examples are Apply, Cancel, Save, Close and Help.

../_images/qtquickcontrols-button.gif

Recommendations:

  • The button’s text should be a verb describing the action, or a noun matching the title of the popup that will be opened.

  • Don’t use a button to set state. Switch is more suitable for that.

  • Use the default font unless you have UI guidelines specifying otherwise.

  • If the text is localized, consider the influence of a longer text on the layout.

See also Button and AbstractButton

CheckBox Control#

../_images/qtquickcontrols-checkbox.gif

CheckBox is used to build multi-selection option lists. Any number of options can be selected, including none, but the options should not be mutually exclusive.

Use a single CheckBox for a yes/no choice, such as when you have to accept the terms of service agreement in a form.

For a single yes/no choice, it is also possible to use a switch. If the choice concerns an option, it is best to use a CheckBox . If it concerns action to be taken, a switch is recommended.

When options can be grouped, you can use a partially checked CheckBox to represent the whole group. Use the checkbox’s partially checked state when a user selects some, but not all, sub-items in the group.

The three availables check states are: checked, partially checked and unchecked.

The checkable options are often listed vertically.

Recommendations:

  • The checkbox label should be a statement that the check mark makes true, and that the absence of a check mark makes false.

  • The checkbox label should not contain a negative statement.

  • Use the default font, unless you have UI guidelines specifying otherwise.

  • If the text is localized, consider the influence of a longer text on the layout.

See also CheckBox

DelayButton Control#

DelayButton is a button that incorporates a delay before triggering an action. This delay prevents accidental presses.

../_images/qtquickcontrols-delaybutton.gif

Recommendations:

  • Use in touch user interfaces.

  • Use for actions that must be triggered with care.

See also Button and AbstractButton

RadioButton Control#

../_images/qtquickcontrols-radiobutton.gif

RadioButton is used to select only one option from a set of options. Selecting one option automatically deselects the one selected before.

If there are only two mutually exclusive options, combine them into a single checkbox or a switch.

Recommendations:

  • Limit the label text to one line.

  • Ensure that a sensible default option is checked.

  • List RadioButton options vertically.

  • If the text is localized, consider the influence of a longer text on the layout.

  • Use the default font, unless you have UI guidelines that specify otherwise.

  • Just like with CheckBox , do not make the list too large.

  • In order to avoid confusion, do not put two groups of radio buttons next to each other.

See also RadioButton

RoundButton Control#

RoundButton is a clickable control that starts an action, or opens or closes a popup. A round button with a square image icon or one-letter font icon is circular. A circular RoundButton takes less space than a normal Button , and can also be used as a floating action button.

../_images/qtquickcontrols-roundbutton.png

Recommendations:

  • Keep labels short and concise.

  • If the text is localized, consider the influence of a longer text on the layout.

See also RoundButton

Switch Control#

../_images/qtquickcontrols-switch.png

Switch represents a physical switch that allows users to choose between an “on” or “off” state. Use a switch for binary operations that take effect immediately after it has been switched on. For example, a switch to turn WIFI on or off.

Recommendations:

  • Keep labels short and concise.

  • If the text is localized, consider the influence of a longer text on the layout.

See also Switch

ToolButton Control#

../_images/qtquickcontrols-toolbutton.png

ToolButton is nearly identical to Button , but it has a graphical appearance that makes it more suitable for insertion into a ToolBar .

See also ToolButton