Page History

...

• All the buttons should have a text description and an icon:

  

  If that it’s not possible (e.g. a small button with an icon) always use the ‘name’ and ‘title’ properties.

• Use the tooltip component when you need a better explanation of a button functionality. For example:

  

• For UI elements on public pages that are only visible to users with elevated privileges use an inverted color scheme btn-dark.

• For the ‘anchor’ ( the ‘<a>’ element) that uses the ‘btn’ Bootstrap CSS class always use btn-outline-primary.

• For the main action button use the Bootstrap CSS class btn-primary.

• For buttons like ‘Cancel’ or ‘Back’ use che Bootstrap CSS class btn-outline-secondary.

• For buttons that open a dropdown list use the Bootstrap CSS class btn-secondary.

• In a button series, or group, only one ‘<button>’ has the Bootstrap CSS class btn-primary.

• The buttons order, inside a group or a series, should follow the kind of action it performs. At the left side the most ‘light’ action, like ‘Back’ or ‘Cancel’, at the right side the most ‘changing’ action like ‘Delete’ or ‘Remove’. So, the order is:

  
  Back -> Cancel -> Submit/Edit/Save/Save for later/Deposit -> Discard/Delete/Remove
  
  

  Here an example:

  

  
  

• Where possible, align the buttons to the right.

• Ogni macro-funzionalità all’interno di una pagina può avere soltanto un button primary

• If, after an action, there is a waiting time, e.g. for the server response, the control (e.g. the button) that launched the action must become disabled and show an animated waiting icon. All other associated controls must be disabled (property ‘disabled=”true”’).

• Action confirmation should occur on cancellations or non-reversible operations; a modal should appear with a message giving the possibility to confirm or cancel the requested action:

...