For reference, a list of common types of buttons found across applications, operating systems, and websites.
Button: a button is a graphical user interface element that when clicked performs an operation in the program. A button normally has a text label or icon and tooltip. Buttons differ from items in that items become selected when clicked on and require double-clicks to be activated—buttons activate with a single click. In a well-made interface, it's possible to navigate through buttons with the Tab key and activate them with the Enter key without using the mouse.
System Buttons
Window Controls
Close button: its icon is often an "X." It's found in the top-right corner of windows and panels. When clicked, it closes the window or panel it's attached to. The area where it's found is called the "window controls," that is part of the "titlebar" of the window. While a window is maximized, the close button is at the top-right corner of the screen and therefore its clickable area becomes infinite (according to Fitts's law). This means you can push your mouse all the way to the top-right corner and click and it will always click the close button without having to precisely target it. It's considered a bug for a window to have a non-clickable margin around the close button that impedes this concept. Closing the main window of an application typically leads to the termination of its program. An application that doesn't terminate after its main window is closed is said to stay "running in the background." In this case, it will normally have an icon appear in the system tray, which can be clicked on to reopen its main window.
Maximize and Restore Buttons: another button found in the window controls maximizes the window (makes it fill the whole screen). While the window is maximized, the maximize button becomes the "restore" button, which restores the window to its non-maximized dimensions.
Minimize Button: a third button found in the window controls minimizes the window (makes it disappear from the screen). A minimized window can still be found as task in the taskbar. Clicking on the task restores the window.
Note: the buttons above are common in all window managers. A good window manager (e.g. Windows' and Linux Mint Cinnamon's) will have tooltips for close, maximize, and minimize buttons. Bad window managers (which include almost every single one in Linux) do not have them.
Desktop
Start Button: the start button is a button on the taskbar that opens the start menu. This button is normally placed on the bottom-left corner of the screen in order to acquire infinite click area (the same way as the close button). The term "start menu," "start button," and now "start" comes from the Windows operating system. In early versions of Windows, the start menu was literally labelled "Start." Current versions only have an icon.
Show Desktop Button: this is a button found in the bottom-right corner of many taskbars that quickly displays the desktop. In some systems, it's a very narrow button.
Speakers Button: this button controls the audio of the system (it's the audio button). It's also found in video-players, audio-players, and websites that play audio or video. Clicking on it shows a slider to change the audio volume. In some systems, middle-clicking the speakers button mutes/unmutes the audio.
Power Button: the power button is shaped like a circle cross on one side with a line. Traditionally, a circle means "on" and a dash meant "off" in a power switch. In computer towers, the physical power button (hardware) isn't a switch, but a button, that turns the computer on when it's off, and tells to operating system to shut it down when it's on, so the two shapes were combined. The icon of the power button in the software likely stems from this. Note that it's not possible to turn the computer on by pressing the software button since the computer needs to be on for the software to be running, so the circle doesn't really make any sense if you think about it.
Dialogs
OK Button: the OK button is found in all sorts of dialogs that only display a message and there is no action besides acknowledging, such as warning dialogs, error dialogs, and sometimes simple informational message dialogs.
OK/Cancel Buttons: some dialogs have a pair of OK/Cancel buttons. The "OK" button, also called the "affirmative" button, would proceed with a prompted action. For example: "this will overwrite a file [OK/Cancel]." In this case, pressing OK allows the program to proceed with overwriting the file, while cancel stops the operation. On any properly-designed dialog with a cancel button, pressing the close button on the dialog window or pressing the Esc key on the keyboard should activate the same action as pressing the cancel button, i.e. it should cancel the operation. Similarly, on popups where clicking outside the popup closes the popup, the cancel action should be activate by doing so. It's recommended to replace the OK button with a more specific term in unusual dialogs, e.g. the save file dialog uses Save/Cancel buttons, while the open file dialog uses Open/Cancel buttons.
Apply/OK/Cancel: some dialogs have an Apply button that applies the modifications performed in the dialog without closing the dialog. In this case, the OK button applies and closes the dialog.
Yes/No/Cancel: some dialogs have a triple of Yes/No/Cancel buttons instead of OK/Cancel. This strange combination is common when you close an application that still has a modified document opened. The application will ask "do you want to save this document? [Yes/No/Cancel]." In this case, pressing Yes saves, pressing No closes the application without saving, and pressing Cancel cancels the closing operation, i.e. the application won't close anymore.
Successive Cancels: some applications have multiple modal dialogs in succession, e.g. if you close the application and a"do you want to save? [Yes/No/Cancel]" dialog appears, but it's a new document without a filepath, dialog to choose where to save will appear. This file chooser dialog will have a pair of Save/Cancel buttons. In this case, what should pressing Cancel do? In my opinion, it should undo the last step, which means that the application should display the dialog "do you want to save? [Yes/No/Cancel]" again. However, some applications may instead cancel closing the application. In badly-programmed applications, it could even occur that cancelling just cancels saving, and the application ends up closing without saving, leading to data loss.
Submit Button: sometimes you may see a form with a button labelled "submit," in the sense of "send." In some tools to create GUIs, the default name of the button that submits a form is "submit," so it could be the developer just forgot to change it to something more user-firiendly.
Reset Button: some forms have a button that resets all fields to their default values.
Common Application Buttons
Menu Buttons
Three-Bars Button: a three-bars buttons is a button typically found in websites designed for mobile devices and unfortunately now infesting desktop applications that has 3 horizontal bars and opens the main menu of the website (or application). Presumably its appearance comes from the horizontal, bar-shaped entries of the menu. Due to it, the menu is known as a "hamburger menu," so this button is the hamburger menu button.
Vertical Three-Dots Button: a vertical three-dots button has three dots (...) one on top of the other, i.e. a vertical ellipsis. When activated, this button displays a menu. I assume its icon is based on the hamburger design. This is a terrible design, by the way. I'm writing this on WordPress in Chrome. Chrome has a 3 dots button on the top-right, then WordPress has a 3 dots button on the top-right, so I have two identical, unlabeled buttons one next to the other. If you wrote "menu" vertically it would occupy the exact same amount of same, if not less.
Horizontal Three-Dots Button: a horizontal three-dots button has an ellipsis as label. This is commonly found next to text boxes and opens a dialog box to select a value for the text box. Most of the time, the textbox will be meant to input a filepath, and the button opens a file chooser dialog to select a file or folder.
Down Arrow Menu Button: a down-arrow button next to other buttons or user interface elements opens a menu or list of options. Often, this is found when a single button performs an default operation, and arrow displays non-default options to choose from. Or when there is not enough horizontal space on a bar to display all potential actions.
Tool Buttons
Tool Button: the term "tool button" typically refers to a button found in a toolbar, which has no text label, only an icon, and consequently has a square aspect ratio. Tool buttons are also found in toolboxes and in panels around lists of items.
Up and Down (Left and Right) Arrow Buttons: a pair of arrow buttons can mean various things. Attached to a list of items, it means to reorder items in the list. In an application that displays a single item of a list at a time (e.g. a single file in a folder), it means to go to the next or previous item. In applications that have a history, it means to traverse the history, e.g. an application with an address bar, such as a web browser or file manager, will let you navigate to the previous location by clicking the left button. The up arrow normally means "go up one level," e.g. if you're viewing a folder, it goes to the parent folder. In good applications, undo and redo use curved arrows to distinguish them from other arrow-related actions. Arrow buttons are also scroll buttons found at the edges of scroll bars in scroll panes. Sometimes, a down-arrow button's function is to be a collapse/expand button, which displays other elements when pressed, and transforms into a right-arrow button or up-arrow button when expanded (plus and minus buttons are also used this way). In text boxes that allow numbers, the pair of up/down arrow buttons on the right side are called spin buttons and increment/decrement the value by a certain amount (typically 1 by 1).
Save Button: this button saves a document currently open in an application. Traditionally, it has the icon of a floppy disk, which some people vehemently disliked because nobody knows what I floppy disk is anymore, despite the fact most people alive today were still alive 20 years ago when floppy disks were still commonplace. The solution that some designers found was to use icons that made even less sense than the floppy disk icon, such as a down arrow sometimes, which means "save down to disk," or an up arrow sometimes, which I guess means "save up to your computer," because I guess your computer is your monitor, which is in front of you, which means up arrow, because whoever made the icon plays too many video-games. Rule of thumb: if your icon has a an arrow, it's a bad icon.
Folder Button: this button opens a document in an application. It has the icon of a slightly open folder, because the document file comes out of a folder.
Sparkling Paper Button: this button creates a new document. It's a white sheet of paper with a sparkle on it. The sparkle means it's "new." Because clearly an old file is dirty and unclean, and wouldn't sparkle as much as a new car.
Sparkling Folder Button: this button creates a new folder. It's found in file managers and applications that use folder icons for virtual groups (e.g. folders for layer groups in image editors).
Trash Button: a button with a trash icon deletes something selected. In some applications, a "minus" is used instead.
Duplicate Button: a button with two squares typically means "to duplicate" or "to copy" (i..e Ctrl+C).
Clipboard Button: a button with an icon of a clipboard is related to concept of a clipboard on the computer, a virtual object where something that has been copied stays. Typically, the clipboard means "to paste" (i.e. Ctrl+V), but it may mean "to copy" in some cases, specially if there is a small arrow pointing toward the clipboard.
Scissor Button: a button with a pair of scissors icon means "to cut" (i.e. Ctrl+X), which sends the selected item to the clipboard (like copying), but also removes it from the application (like deleting).
Pin Button: in some applications, it's possible to "pin" things to keep them visible. The button to do this has a "pin" icon. In some cases, this is called "favorite" instead, but still uses the pin icon.
Padlock Button: a button with an icon of a padlock means the action to "lock" an item, typically preventing it from being edited.
Star Button: a button with an icon of a star typically means to "favorite" an item. In web browsers, it's commonly found in the address bar and means "to bookmark" a webpage(How to Bookmark Webpages?).
Bookmark Button: a button with an icon of a bookmark (a narrow vertical rectangular with a triangular cut at the bottom) means "to bookmark" something.
Heart Button: a button with a heart icon means "to like" or "to favorite" depending on the application.
Thumbs Up Button: a button with a thumbs up icon means "to like," and is based on Facebook's likes.
Download Button (Down Arrow): a download button is a button that downloads something when clicked. It often has a "down arrow toward a box" icon, when it has an icon. Normally it just says "download." In particular, some websites that offer free downloads tend to be infested with ads with fake download buttons that can potentially download unwanted software and malware.
Reblog Button (Two Spinning Arrows Button): this is a button found in some social media websites like Tumblr, Twitter (X), and Mastodon, where it has different names depending on the platform: reblog, retweet (repost), and boost. It means to post someone else's microblog post in your microblog to share it with your visitors and followers.
Form Buttons
Dropdown List Button: a dropdown list button is a button that displays the selected item of a list, and the displays a dropdown list to change te selection when pressed.
Checkbox: a checkbox is an "invisible" button composed of a box and a text label. Clicking anywhere on the button, including on the label, checks the checkbox. In badly-designed applications, clicking on the label doesn't check the box.
Radio Button: a radio button is a checkbox with a circle instead of a box. Radio buttons are always part of groups where only one single radio button may be checked at a time. Checking a different radio button automatically unchecks the currently checked radio button.
Switch: a switch is a checkbox that looks like a switch. It often offers terrible UI because nobody knows if it's supposed to be checked or not from first glance. An argument for it is that forms that automatically apply should use switches instead of check boxes. That doesn't really make a lot of sense to me since none of the other things on a form, such as text boxes, have a switch on them, so it's weird that only checkboxes must have this special auto-save form.
Tabs: tabs are buttons on top of a tabbed pane. Clicking on a tab switches the currently visible tab.
Leave a Reply