Pop-up buttons

A pop-up button displays a menu of mutually exclusive options.

After people choose an item from a pop-up button’s menu, the menu closes, and the button can update its content to indicate the current selection.

Best practices

Use a pop-up button to present a flat list of mutually exclusive options or states. A pop-up button helps people make a choice that affects their content or the surrounding view. Use a pull-down button instead if you need to:

  • Offer a list of actions
  • Let people select multiple items
  • Include a submenu

Provide a useful default selection. A pop-up button can update its content to identify the current selection, but if people haven’t made a selection yet, it shows the default item you specify. When possible, make the default selection an item that most people are likely to want.

Give people a way to predict a pop-up button’s options without opening it. For example, you can use an introductory label or a button label that describes the button’s effect, giving context to the options.

Consider using a pop-up button when space is limited and you don’t need to display all options all the time. Pop-up buttons are a space-efficient way to present a wide array of choices.

Platform considerations

No additional considerations for iOS or iPadOS. Not supported in tvOS or watchOS.

macOS

If you need to present customization options, put them below a separator at the bottom of the pop-up button’s menu. For example, in the Print view, the Printer pop-up button’s menu includes options for adding a printer and configuring printer settings. If people can add a new item to the menu, display the new item as the current selection.

Supported platforms