diff --git a/images/ui/button/button_hovered.png b/images/ui/button/button_hovered.png index d54c977cf..edf6676eb 100644 Binary files a/images/ui/button/button_hovered.png and b/images/ui/button/button_hovered.png differ diff --git a/images/ui/button/button_hovered_dark.png b/images/ui/button/button_hovered_dark.png index 14324f471..d0147fb6a 100644 Binary files a/images/ui/button/button_hovered_dark.png and b/images/ui/button/button_hovered_dark.png differ diff --git a/topics/ui/controls/button.topic b/topics/ui/controls/button.topic index 496030756..cf1f502f2 100644 --- a/topics/ui/controls/button.topic +++ b/topics/ui/controls/button.topic @@ -64,7 +64,7 @@ -

The label displays the action the button performs.

+

Use an action name as a button label.

Use title capitalization for button labels.

 @@ -78,7 +78,12 @@

The button should answer the question in the title, so the user can skip the description. Prefer specific labels over - generic ones:

+ generic ones.

+ + Exception: the Cancel button if it's clear what action is being canceled. + For example, use + Cancel instead of Don’t Create. +
Correct @@ -87,11 +92,6 @@ An incorrect button with a generic 'OK' label
- - Exception: the Cancel button if it's clear what action is being canceled. - For example, use - Cancel instead of Don’t Create. -

Do not use the word Now in labels because buttons always trigger an immediate action: @@ -164,8 +164,9 @@

  • The default button should always be present in a dialog. Only one button in a dialog can be the default one.
    • -
  • If an action is dangerous, for example, it can lead to data loss, provide an easy way to undo the command.
    • -
  • If it's not possible to undo the action, make a secondary button the default one: +
  • If an action that a default button performs is dangerous, which means it can lead to data loss, there + should always be an easy way to undo it. + Otherwise, use a secondary button for a dangerous action and a default button for a safe action: A dialog with secondary and primary buttons @@ -253,9 +254,6 @@ width="706"/>

    Disable a button if:

    -
  • It’s an - Apply button, and no changes have been made in this dialog. -
  • The control to which the button is related is disabled.
  • Not all required fields in the dialog are filled.
    • @@ -269,21 +267,9 @@

    On hovering over a button, show a tooltip with the shortcut and the action name if it can be clarified. For more details, see Context help.

    - - - - - -
    - Hovered buttons - - -

    If the action is clear, show the shortcut only. -

    -

    - If the action can be clarified, show the action name and the shortcut. -

    -
    +

    If the action is clear, show the shortcut only. If the action can be clarified, show the action name and the shortcut: +

    + Hovered buttons     @@ -297,10 +283,10 @@

    Use the Apply button in dialogs with many settings that affect how data is displayed. The Apply button - allows you to - save and preview the effect of the selected options and continue changing the settings, for example, - change a scheme in - settings.

    + allows you to save and preview the effect of the selected options and continue changing the + settings, for example, change the editor color scheme in settings.

    +

    The Apply should be disabled if no changes have been made in the dialog. +

    @@ -313,28 +299,13 @@ -

    The - Cancel - button reverts the app to the state before the dialog was invoked, and works as an equivalent to the - - Esc - - key on Windows and Linux, and - Esc - or - Cmd+Period - on macOS. - If a confirmation button is present in a dialog, for example, - OK - or - Save - , it’s recommended to have a button that cancels the - dialog, for example, - Cancel - , - Continue Editing - , and so on. -

    +

    TheCancel button reverts the app to the state before the dialog was + invoked and works as an equivalent to the Esc key.

    +

    If a confirmation button is present in a dialog, for example, + OK or + Save, it’s recommended to have the Cancel button.

    +

    If it is not clear what will happen on clicking the Cancel button, + make the label more specific, for example, Continue Editing.

    @@ -359,11 +330,6 @@ Cancel button.

    -

    Do not - add an icon to the button. The main purpose of an icon is to quickly find a familiar action in a packed - toolbar or menu. Usually, no more than 3 buttons are placed nearby, their labels can be scanned quickly, - and icons are not required. -

    @@ -376,9 +342,9 @@ -

    The help button appears in the bottom-left corner of a dialog and shows help in a tooltip on hover, or - opens a help - dialog when clicking it. For more details, see Context help.

    +

    The help button appears in the bottom-left corner of a dialog and + opens a documentation website. Add this button if the dialog's functionality is described + in documentation.