Standard button
Standard buttons indicates an instant action, preformed with a single click.
Variations
The standard button can be used in a normal and raised version, each with an option to use icon in addition to the label.
Standard button
The labeled icon button should be used for functions that is non-conventional. Use the label button the most.
The normal button are the most regularly used variant.
The raised button shall only be used when you want to highlight a preferred action.
Standard button with icon
The labeled icon button should be used for functions that is non-conventional. Use the label button the most.
The normal button are the most regularly used variant.
The raised button shall only be used when you want to highlight a preferred action.
Specs
How the standard button, with and without icon, are built up and styled.
Anatomy
The standard button is built up by a container and a textbox. The icon is optional.
Colors
The button container, textbook and icon colors depends on wether it is a normal button or a raised button.
Normal button
Raised button
Typography and icons
The standard button use the button text, and have the option to be displayed with an icon associated with the button text.
Measures and spacing
The standard button has a min-width to make the button shape consistent. Try to keep related buttons the same width to show relation.
States
The look of the states are defined by the style.
