UX-2323 Update existing UI Guidelines: Button, fix review comments
BIN
images/ui/button/button_delete_dialog.png
Normal file
After Width: | Height: | Size: 102 KiB |
BIN
images/ui/button/button_delete_dialog_dark.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
images/ui/button/button_delete_dialog_incorrect.png
Normal file
After Width: | Height: | Size: 101 KiB |
BIN
images/ui/button/button_delete_dialog_incorrect_dark.png
Normal file
After Width: | Height: | Size: 99 KiB |
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 6.5 KiB |
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 6.6 KiB |
@ -78,20 +78,16 @@
|
|||||||
<chapter title="Be specific" id="be-specific">
|
<chapter title="Be specific" id="be-specific">
|
||||||
<p>The button should answer the question in the title, so the user can skip the description. Prefer specific
|
<p>The button should answer the question in the title, so the user can skip the description. Prefer specific
|
||||||
labels over
|
labels over
|
||||||
generic ones.</p>
|
generic ones:</p>
|
||||||
|
<format color="369650" style="bold">Correct</format>
|
||||||
|
<img src="button_delete_dialog.png" alt="Specific button in a dialog" width="706"/>
|
||||||
|
<format color="E55765" style="bold">Incorrect</format>
|
||||||
|
<img src="button_delete_dialog_incorrect.png" alt="Generic button in a dialog" width="706"/>
|
||||||
<note>
|
<note>
|
||||||
Exception: the <control>Cancel</control> button if it's clear what action is being canceled.
|
Exception: the <control>Cancel</control> button if it's clear what action is being canceled.
|
||||||
For example, use
|
For example, use
|
||||||
<control>Cancel</control> instead of <control>Don’t Create</control>.
|
<control>Cancel</control> instead of <control>Don’t Delete</control>.
|
||||||
</note>
|
</note>
|
||||||
<table style="none" border="false" column-width="fixed">
|
|
||||||
<tr>
|
|
||||||
<td><format color="369650" style="bold">Correct</format>
|
|
||||||
<img src="button_default_save.png" alt="A correct button with a clear 'Save' label" width="378"/></td>
|
|
||||||
<td><format color="E55765" style="bold">Incorrect</format>
|
|
||||||
<img src="button_default_OK.png" alt="An incorrect button with a generic 'OK' label" width="378"/></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<p>Do not
|
<p>Do not
|
||||||
use the word
|
use the word
|
||||||
<control>Now</control> in labels because buttons always trigger an immediate action:
|
<control>Now</control> in labels because buttons always trigger an immediate action:
|
||||||
|