Button Controls
Qt Quick Controls 2 offers a selection of button-like controls.
Abstract base type providing functionality common to buttons | |
Push-button that can be clicked to perform a command or answer a question | |
Check button that can be toggled on or off | |
Exclusive radio button that can be toggled on or off | |
A push-button control with rounded corners that can be clicked by the user | |
Button that can be toggled on or off | |
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.
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
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 indeterminate state when a user selects some, but not all, sub-items in the group.
The three availables statuses are: checked, unchecked and disabled. "Disabled" is useful when the user should not be able to check or uncheck a checkbox.
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
RadioButton Control
RadioButton is used to select only one option from a set of options. Selecting one option automatically deselects the one selected before.
The set of options should not be too large, otherwise it starts taking too much space on the screen. In that case it would be more practical to use a ComboBox.
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.
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
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
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
Related Information
© 2017 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.