Button menu

A button that reveals hidden actions a user can take.

Anatomy

Label
Links
Icons
Menu

Example

Coded example

Code snippet

									
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Button menu
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Menu item one</a>
    <a class="dropdown-item" href="#">Menu item two</a>
    <a class="dropdown-item" href="#">Menu item three</a>
    <a class="dropdown-item danger" href="#">Delete</a>
  </div>
</div>

									
  None required

Figma prototype

Usage guide

Dos and don'ts

To select one of many actions. For example download a logo image small (X kb) or Large(X kb).

If your interface is tight for space this could be a good option instead of many buttons or links.

There are alot of options for user.

When a select input is the right option to use.

If there are only a couple of options displaying them directly on the screen might be best option.

Don't hide other primary actions in a button menu for example. Submit / Cancel would display as a button group.