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:


Standard menu button
The normal styled version should be the most used in the interface. This is the standard state of the component.

Standard menu button
The normal styled version should be the most used in the interface. This is the standard state of the component.


Menu button with icon
To highlight a preferred action, use a raised styled version.

Menu button with icon
To highlight a preferred action, use a raised styled version.


Menu button with icon and label
This variation is used when there is a need for a smaller button.

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.


Colors and styles
The menu buttons are only displayed in a normal style.




Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.

Specs
This component is built up by a oval slider and icons.

States
The look of the states are defined by the style.











