Browse

A set of related buttons placed directly next to each other as one visual unit, so people see them as belonging together — for example a row of text-formatting or view-switching buttons.

A button or link that urges the visitor to take a specific next step, such as "Sign up" or "Buy now". It is usually the most prominent, obviously clickable thing on the page.

An action that permanently deletes or undoes something and cannot easily be reversed, like "Delete account". Its button is usually coloured red and often asks you to confirm first.

A button that opens a small menu of choices when clicked, rather than doing something itself. It is usually marked with a downward arrow, called a caret.

A button that appears slightly raised off the page with a soft drop shadow, using that lift to draw a little more attention than a completely flat button.

A round button that hovers above the content in a fixed corner, usually bottom-right, giving quick access to a screen's single most important action. It is common in mobile apps.

A button with no solid fill — just an outline or coloured text on a transparent background — used for low-emphasis actions so it stays visible without drawing the eye.

A small button whose label is a picture (icon) instead of words, like a trash can for delete or a magnifying glass for search. It saves space but only works if the icon is easy to recognise.

A button styled to look like a plain text link — coloured, sometimes underlined, with no border or fill — used for the quietest, least important actions.

A button drawn with a visible border and little or no fill, giving it medium emphasis — more noticeable than plain text but quieter than a solid, filled button.

The most visually prominent button in a view, marking the main action you are expected to take, like "Save" or "Continue". It is usually filled with a solid, high-contrast colour so it stands out.

A form button that clears everything you have typed and returns the fields to their original state, without saving or sending. It is rare today because people click it by mistake.

A less prominent button for an alternative or supporting action, such as "Cancel" beside "Save". It is styled more quietly than the primary button so it does not compete for attention.

A two-part button: the main part runs a default action, and a small attached arrow opens a menu of related choices. Common for actions like "Save" with a dropdown for "Save as…".

The clickable or tappable area of a button, which should be large enough to hit easily with a fingertip even when the visible icon is small. Guidelines suggest at least about 44 pixels across.

The lowest-emphasis button style in a set, styled to be the least eye-catching — often plain text or a subtle outline — so it doesn't compete with the main and secondary actions.

A button that is just a coloured text label with no background or border, used for the least important actions so it stays visually quiet.

A button that flips between two states — on and off — and stays in whichever state you last set, like the bold button in a text editor. Its pressed-in look shows the current state.