Buttons

../_images/buttons.png

Buttons are one of the most common and basic user interface elements.

General Guidelines

  • Typically, a button contains either an icon or a label. Buttons generally shouldn’t contain both.

  • Do not use more than one or two different widths of button in the same window, and ensure that buttons placed next to each other have the same width. This will give a better appearance.

  • Do not assign actions to double-clicking or right-clicking a button. Users are unlikely to discover these actions, and if they do, it will distort their expectations of other buttons.

  • Make invalid buttons insensitive, rather than showing an error message when the user clicks them.

  • Button labels should use imperative verbs, using header capitalization. For example, Save or Update.

  • Button labels should be short, in order to keep the button width narrow. Consider how labels will change width when localized.

Toggle Buttons

Toggle buttons switch between two states, set and unset. This state is indicated by the button being either “pushed in” or “popped out”, respectively.

Toggle buttons are an appropriate choice for modes or settings which have an obvious binary nature. They are generally used when space is limited, as an alternative to switches.

Toggle buttons can also be linked, to create a control for selecting one of a series of options. This approach is appropriate when the available options are not binary in nature and the options available can be expressed with short labels.

Linked toggle buttons are primarily used to fit an option into a relatively short space, such as a list row or header bar. When space isn’t a limiting factor, other options such as radio buttons might be a better choice.

A linked toggle button example can be found in the Flap demo in the LibAdwaita demo app.

Button Styles

Buttons can be given a distinctive visual style, which can be appropriate in certain situations. This includes:

  • suggested-action can be used to highlight a button for affirmative action. This can be used to draw attention to the next step in a process or a call to action.

  • destructive-action can be used to draw attention to the potentially damaging consequences of using a button. This style acts as a warning to the user.

Each view should only ever include a single button using either the suggested or destructive styles.

API Reference