Multi Button

On Multi Buttons the user can choose between a range of options, the action will trigger as soon as an item in the menu is clicked.

Usage


Multi Button VS Action Button

On Multi Buttons, the action will trigger as soon as an item in the menu is clicked, contrary to Action Buttons which let users select an option in the menu without executing said option.

Unlike the Action Button, there is no “default” action.

When to use a Basic Button VS Multi Button

Use when related actions can be grouped in a dropdown.

Do
A multi-button with two dropdown items

Use the Multi Button when multiple action options are available (especially if the actions are all considered primary). This may be particularly helpful when there is a lack of real estate.

Don't
Three primary buttons all listing out actions.

Avoid listing out the individual action options with basic buttons. This is especially true of the primary button as there should only be 1 primary button per application area.

Do
A primary button with no dropdown options

Use the basic button when there is only 1 action option available.

Don't
A multi-button with one dropdown option

Avoid using the Multi Button when there is only 1 action option available.



Use concise labels

Do
A primary button stating 'button'

Use clear and to-the-point language.

Don't
A primary button stating 'button'

Limit the label length and do not use punctuation marks.

Use unambiguous text

Do
A primary button stating 'button'

Unless the context around the multi-button is clear, the multi-button text should be direct about the outcome of the action.

Don't
A primary button stating 'button'

Unless the context is clear, avoid ambiguous text.