This repository has been archived by the owner on Aug 12, 2021. It is now read-only.
Actions
Are components that perform an "action" when clicked, tapped.
Two main variants are used depending on the visual emphasis required.
| Variant | Description |
|---|---|
| Flat | Flat buttons have a transparent background. Displaying only the label. The normal Dimensions will be preserved to have a sufficient clickable/tapable area |
| Standard | Have a contrasting background increasing the Visual Weight for the component |
| Element | Description |
|---|---|
| Button | The main element and clickable area |
| Caption | Short text describing the action that will be perform on click/tap; for example: Save, Cancel |
| Icon | Visual representation of the action, can used alone or along with the Caption |
The Comon UX Elements and dimensions can be combined
| Combination | Usage |
|---|---|
| Button + Caption | Most common action. |
| Button + Caption + Icon | Adds a easy recognisable visual representation for the action along with the label. This type of icon can be displayed vertically, getting the icon a most prominent place |
| Button + Icon | Only a visual representation of the action is displayed. Use with care since there is no textual information and users may not recognise the icon right away. |
Using the spacing system documented on https://github.com/SAP/techne/wiki/Spacing-Design-specs
