Popover hint on icon-only buttons

[janhassel]

The problem

Using icon-only buttons that will trigger a menu of additional options is fairly common in UI designs across the industry. The depiction of three dots (aligned horizontally or vertically) is essentially an established standard by now that conveys this information. However, in many cases this kebap/meatball icon isn't appropriate and a more descriptive icon should be used when similar options are grouped. For this scenario, the Carbon OverflowMenu offers a renderIcon prop to change the trigger icon. Without any additional affordance though, it's hard for users to know whether the button will now already perform an action or if they'll receive a list of options (in form of a menu).

This has led to inconsistent experiences where some teams are using no additional indicator and some teams are using a chevron-down next to the icon which can result to unfavorable spacing and visual relationship issues (also it's not supported by the Carbon components).

In the design guidance, Carbon describes a Text Toolbar pattern (which isn't available in code afaik). Here, a small caret is used in the bottom right corner to distinguish the icon-only menu buttons from the action performing buttons.

Existing patterns

Figma

The Figma toolbar uses a chevron. However, this is used inconsistently as the very first item (Figma logo) is a menu button (entire button is the menu trigger) and the rest are actually combo buttons where only the chevron is the menu trigger.

macOS Notes

This uses a chevron and works as a menu button.

GitHub header actions

Also using a chevron and a menu button pattern. Here, the buttons are clearly visually separated though.

Spotify

No visual affordance between action-performing buttons and menu buttons.

Photoshop toolbar

Using a caret in the bottom right corner. The interaction pattern is different though: Single click: tool is selected, long or right-click: menu appears.

Blender

Using a chevron and menu button pattern. The chevrons are placed very closely to the icon and further visual grouping is established though background and border styling.

Approaches

1. Visual indicator

Define a visual indicator that should be used when the trigger icon isn't clearly communicating the menu button pattern.
In code, OverflowMenu could render this indicator by default when renderIcon is used. There should probably be a way to opt-out of this though with another prop (sth. like props.noPopoverHint). Alternatively make it explicit opt-in (props.showPopoverHint).

2. IconMenuButton

Create an IconMenuButton variant based on the MenuButton component which will break out of the square boundaries of an IconButton. The padding could be controlled to avoid the spacing and visual relationship issues described above.
If spacing isn't an option, this component could render an inline border similar to the divider in ButtonSet

3. Design guidance only

Without offering code, clearly guide designers on this topic and how to prevent above mentioned issues.*

*full disclosure, I'm not a big fan of this one as I believe the current inconsistencies we experience in products using Carbon stems from the fact that there is no coded solution to this problem.

---

cc @aagonzales @mbgower @thyhmdo

[mbgower]

The popover variants, particular the No Tip, which requires a visual cue on the trigger, are very relevant to this discussion

Popovers without a tip are typically used when the trigger button has a visually defined down state

It's also worth looking at the disclosure pattern info on visual guidance

[aagonzales]

Some examples I've run across in the wild

[thyhmdo]

More other existing components with the caret-down icon

---

Revit

---

Sketchup

---

AutoCad

[AmandaFurukawa]

This is a product example that exists in Cognos Analytics - note that this isn't using the carbon toolbar, it's custom.

[AmandaFurukawa]

Planning Analytics has the same pattern

[thyhmdo]

The article pointed out that this example (bottom right corner) may not be recommended, as there is no visual signifier for that unique affordance

[mbgower]

The article pointed out that this example (bottom right corner) may not be recommended, as there is no visual signifier for that unique affordance

Note that they're critiquing that as a split button design, wherein the user need to get to the other options with a press and hold. So, it's not that they're criticizing the arrow, so much as criticizing the split button pattern. It's a little frustrating they do not link to any specific guidance on button menus (as opposed to split buttons) in that article.

I do not think Jan is looking for a split button. Just a button menu with a visual dropdown indicator. Most of the visual examples folks have added have been for split buttons.