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.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d5b8d2803533201a97b0595_01%20Normal.png)
The normal button are the most regularly used variant.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d5bb7cde5ce7355dc6422f2_01%20Normal.png)
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.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567980071b496ef56bf9_01%20Normal.png)
The normal button are the most regularly used variant.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56834b005146349104f1_01%20Normal.png)
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.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d5c96867f665820927_Standard-button_Specs.png)
Anatomy
The standard button is built up by a container and a textbox. The icon is optional.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d8e6f0c81f8fca1af9_Standard-buttons_Color_Normal.png)
Colors
The button container, textbook and icon colors depends on wether it is a normal button or a raised button.
Normal button
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d8e6f0c81f8fca1af9_Standard-buttons_Color_Normal.png)
Raised button
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d84b00517c50910920_Standard-buttons_Color_Raised.png)
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.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d6055861759c19e777_Standard-button_Typography.png)
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.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56d44b0051491e910916_Standard-button_Measurements.png)
States
The look of the states are defined by the style.
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5af44b0051d6ad912e1f_01%20Normal.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567980071b496ef56bf9_01%20Normal.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d5b8d273ef06a51f0ef728c_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567a4b0051bbb49104ba_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d5b8d26eaf3b70a40e652b6_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567bace5c7984975637e_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d5b8d5f03533245607b05e0_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567bace5c79caa75637f_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b2580071b5228f5a01a_05%20Disabled.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567cace5c747d17563cc_05%20Disabled.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b04c968674de982358f_01%20Normal.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c56834b005146349104f1_01%20Normal.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b3c80071b9a9bf5a0f1_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5683c96867cc46820583_02%20Hover.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b3ce6f0c8dd73ca5618_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5685e6f0c8e45aca17b3_03%20Pressed.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b3d80071b9042f5a0f2_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5686055861e9b119e149_04%20Focused.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c5b2580071b5228f5a01a_05%20Disabled.png)
![](https://uploads-ssl.webflow.com/5d43dd7bedcaeb1315b207c4/5d8c567cace5c747d17563cc_05%20Disabled.png)