Buttons
Buttons have to clearly communicate the behaviour after the user clicks on them. Mostly buttons contain a short text which can be supported by an icon.
For Developers: The button.twig component itself is refactored into a standalone reusable component, however, the class names and file names are not yet refactored to ABEM naming and need to be updated.
Sketch name:
Atoms/Button/Default
Tempalte Details:
Name:
Button
Documentation:
https://www.contorion.de/designsystem/atoms/button
Template:
@application/components/button.twig
Button colors
ReadyPrimary Button
The primary buttons are used for primary links and actions on a page. The primary class can be applied to button tag.
Sketch-Component: Atoms/Button/Default/Primary
Grey Button
The grey buttons are used mostly for canceling some action. The grey class can be applied to button tag.
Sketch-Component: Atoms/Button/Default/Grey
Transparent Button
Summary of all the button color variations we have
Inverted buttons
ReadyThe inverted buttons are used for secondary links and actions on a page. The inverted class also can be applied to button tag.
Sketch-Component: Atoms/Button/Default/Secondary
Disabled buttons
ReadyThe disabled buttons are used for actions that are currently not available to the user.
Sketch-Component: Atoms/Button/Default/Disabled
Button-links
Currently, we are not using button-links. The links, sometimes with icon attached, are used instead.
Play buttons
ReadyThe play button is used for actions that are starting a video.
Sketch-Component: Atoms/Button/Video/BTN_Video_DE_AT
Mobile header buttons
Mobile header buttons will be used in the new mobile navigation.
Colors
| Color | Explanation | Usage | SCSS |
| #5DA422 | Use to show the active state of an item | Available, Done, Approved, Added | .bg--success |
| #1D99FA | Articles in work | In progress, changed, open, not started | .bg--theme |
| #F3F3F3 | Navigation | Navigation | .bg--grey--light |
| #999999 | Completion of a status | Completed, finished | - |
| #666666 | Used for generic status | Information | - |
| #C50E12 | Use for generic status | Information | .bg--error |
Button sizes
3 sizes are currently used for the buttons: large, regular and small ones.
Button usage
| Type | Usage |
| Primary | Primary button indicate a specific action and highlight this action. |
| Secondary | They are used to indicate a secondary action that complements a primary action. |
| Button with Icon | This option is used to draw more attention to a button or to better communicate what the button does. Icons can be paired with text or used alone. |
| Disabled Button | This button is used for actions that are currently not available to the user. It should be clearly communicated why the button is deactivated and how the user can activate the button. |
| Link Button | Used for tertiary links and destructive actions such as "Cancel" in addition to the primary button. Currently, not used. |
| Small Button | This button is used when there is not enough vertical space for a normal or large button e.g. in lists or tables. Small buttons are not used for primary actions. |
| Large Button | Used in marketing campaigns and in the header to draw attention to actions as a call-to-action. |
Rules
General
- ● Too many buttons should not be used on one page.
- ● The target value is 1-2 buttons as call-to-action per page. Similar elements that might be considered as button should be avoided.
- ● Buttons should not be used as navigation elements, links should be used instead, since they direct the user to a new page and are not assigned to any action.
Labels
- ● Use upper and lower case letters.
- ● Labels should be kept as short as possible.
- ● Use "trigger words" that are known to the user and are quickly understandable which interaction is triggered by the button, e.g. "Save and continue", "Download" or "Register".
- ● The first word of the button label should be a verb.
- ● If a button contains an icon, it should also contain accompanying text that describes the action.