mutton in the
wild? Tell us
in a comment!
- Fresh UI pattern
- Frees space
- Keeps functions handy
Though this is my current favorite UI pattern, I have to admit I giggle whenever the name comes up. Only after we’d added these to Strands did I read (in an actual book) what some people are calling them, though I wonder if there’s something less goofy we could use. The combination of menu and button is called… wait… here it comes… the “mutton”.
Muttons are a great solution for freeing space while keeping a primary action visually prominent. Like functions are placed in a drop-down menu which forms the right side of the component, therefore firmly establishing the functional similarities. One way of thinking of this is “hey, I’m the main action but these guys are with me”.
Yahoo uses one for their many email options:
WordPress uses one for content adding:
Gmail has a fun variation for selection, essentially a checkbox + menu:
Strands is using muttons on their Share Something menu, but these menus also include the primary function. This is because the button does not include text and further explanation is useful.
I’m curious to see how this UI pattern evolves or is at least ultimately defined. The mutton seems very natural to me and I don’t think it’s likely to be frequently abused, but you never know. Have fun if you use ‘em!