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.

Component elements
1
Container
3
Label

Colors and styles

The menu buttons are only displayed in a normal style.

Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.
Element
Color / Style name
1
Container
style-normal
This is some text inside of a div block.
This is some text inside of a div block.
2
Label
This is some text inside of a div block.
This is some text inside of a div block.
3
Stepper Container
This is some text inside of a div block.
This is some text inside of a div block.

Typography and icons

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

Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Label
Element
Text style
1
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Button
2
Label
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Label

Specs

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

1
Component measures
2
Spacing
3
Border sizes
1
Component measures
2
Spacing
3
Border sizes

States

The look of the states are defined by the style.

Standard menu button
Component state
Element
Style
Enabled
Container
style-normal-enabled
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Hover
Container
style-normal-hover
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Container
style-normal-pressed
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Focused
Container
style-normal-focused
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Disabled
Container
style-normal-disabled
Label
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Component state
Element
Style
Pressed
Container
style-raised-pressed
Label
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Submit feedback