Menu button
Updated:
March 15, 2020
The menu button are a button that expands a flyout with a group of related functions, like a stack of buttons.
Variations
The menu button can be used in three different variations:
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a48315bd8294ce3e5f7_01%20Enabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a48315bd8294ce3e5f7_01%20Enabled.webp)
Standard menu button
The normal styled version should be the most used in the interface. This is the standard state of the component.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a48315bd8294ce3e5f7_01%20Enabled.webp)
Standard menu button
The normal styled version should be the most used in the interface. This is the standard state of the component.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a552cb63fbf132761fe_01%20Enabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a552cb63fbf132761fe_01%20Enabled.webp)
Menu button with icon
To highlight a preferred action, use a raised styled version.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a552cb63fbf132761fe_01%20Enabled.webp)
Menu button with icon
To highlight a preferred action, use a raised styled version.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a7731fdb053064cfdd2_01%20Enabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a7731fdb053064cfdd2_01%20Enabled.webp)
Menu button with icon and label
This variation is used when there is a need for a smaller button.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a7731fdb053064cfdd2_01%20Enabled.webp)
Menu button with icon and label
This variation is used when there is a need for a smaller button.
Component building blocks
Anatomy
The menu buttons are built up by a container, a label, an arrow icon with a optional icon associated with the label.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6e38e96efc1c586cb35943_Menu%20button%20%20Specs.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a82cb3c493769d56de9c1_Menu%20button%20%20anatomy.webp)
Colors and styles
The menu buttons are only displayed in a normal style.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7d44e151fce5ca573b0c_Menu%20button%20color.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7c6503bb366eefee3686_Menu%20button%20color%20-%20Day.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7c699898419a1162069a_Menu%20button%20color%20-%20Dusk.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7c6ca8fac52228b9e9e1_Menu%20button%20color%20-%20Night.webp)
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6b73ba961966520925a9c8_Menu%20button%20typography%20Copy.webp)
Specs
This component is built up by a oval slider and icons.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7ce7db27999a53a8d8b8_Menu%20button%20measure.webp)
States
The look of the states are defined by the style.
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a48315bd8294ce3e5f7_01%20Enabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a7a552cb63fbf132761fe_01%20Enabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a80683c49372ac56cd2fc_02%20Hover.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a80fa709b6e04fd6f58a6_02%20Hover.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a8164c62afa2545c7d6ed_03%20Pressed.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a816c80d54d75cdb1a6fd_03%20Pressed.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a8196dcf7d1c7b7b0809f_04%20Focused.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a819ec7b3bdb1dacb57ab_04%20Focused.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a81d0af6c8a830c175e4b_05%20Disabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a81d54bd4eb65240c429b_05%20Disabled.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a8201e54080c940990b3d_06%20Selected.webp)
![](https://cdn.prod.website-files.com/5e15a495fa5548c09600c171/5e6a82075288712a96246b96_06%20Selected.webp)