Elements
Input
Examples
Structure
Guidelines
Button
Examples
Primary button
The Primary button is for all the action of high emphasis, as Save / primary action of the wizard etc.
Secondary button / Outlined button
The secondary button has more emphasis then a text button. Mostly used for secondary important actions beside a primary button to highlight a hierarchy.
Ghost Button
In Development. Only Proposal.
Other than a Text link inside a text, this is a standalone element, used for tertiary elements.
Text Button
Currently the Text Button functions as unobtrusive Idea for a place, where alot of functions are already there and has the least importance.
Disabled Button
This is an example of a disabled button. The disabled property is added on submit to prevents people from submitting their information twice by mistake while submitting a form.
Structure
Buttons can have various sizes. XS / S / SM / M / L
Guidelines
A single, primary button
As a general rule, a layout should contain a single primary button that makes it clear that other buttons have less importance in the hierarchy. This primary button commands the most attention.
Button Groups
| Alignment | Use case |
|---|---|
| Left-justified | TBD |
| Right-justified | Inline notifications, inline field buttons and data tables, forms, wizards, and single-button dialogs |
| Full-width | Dialogs, and small pop-ups, where only 1 or 2 actions are necessary |
When using multiple buttons, the position of the primary button is the most important part. To sum up, a primary button will be left-aligned and positioned to the left of the secondary/tertiary button.
If the Model is right aligned, the primary button will be right-aligned and appear to the right of the secondary/tertiary button.
Switch
2 States, changes are applied instant.
Examples
Structure
Guidelines
Cannot be used for states, in wich you need to save something.