Saturday, November 7, 2020

Semantic theming - buttons and actions

 In semantic vocabulary the "button" is a wrong term which belongs rather to UI components. Button-like UI component could be presented as tabs, links, etc. There is common quality for all of them: the goal. Which is ACTION

There are PRIMARY actions which serve the main flow with one DEFAULT variation. Default action is emphasized in UI to highlight what would happen if you hit ENTER key or say "Submit", in the scope of current form or document. 

The ALTERNATIVE actions meant to swing the flow from unusual. Often used for closing dialogs or cancel the multi-step flow.

Synonyms and mixing up terms:

PRIMARY often used as a term for default action. In such case the "secondary" is used as a surrogate for primary and "tertiary" as surrogate for alternative.

ALTERNATIVE called a "secondary".

"info", "success", "warning", "danger" - all referring to different specialized flows. Which could be justified if your application has many flow "flavors" and some are common. In usual application there is no need for such generalization as flows actually meant to be limited and clear in understanding. 

TBD:

  • relation of action types with emotional and branded palette. 
  • CSS properties example with dark/light variations