Button Preview
A button triggers a single action or event.
Use buttons for important actions like submitting a response, committing a change, or moving to the next step. If you need to navigate to another place, try a link instead.
Resources
Types
Button
A standard button sits at the same elevation as the main page content and initiates a single action or event.
Floating action button
A floating action button, or FAB, highlights the primary action. It is elevated above all other layout elements and is persistently elevated at the bottom right of the screen.
Layout
Follow native patterns
In iOS, the Back button always goes at the top left in the navigation bar. A Done or Save button will always go at the top right.
A Cancel button goes at the top right if it’s the only action. If it’s paired with Done or Save, place it at the top left.
Make primary buttons stand out
Only use one primary button in a layout for the most important action and always give it prominent placement, either on top of or to the left of other actions. If there are more than two buttons with equal priority, all buttons should have neutral backgrounds to avoid a busy layout.
Avoid primary buttons in lists and modals
Primary buttons should be used for hero scenarios, or experiences where the entire UI is calling for an action to be taken, like signing in or upselling. When used in more information rich scenarios, the experience loses focus, and the primary button takes away prominence from other information on the screen.
Accessibility
Make sure that groups of buttons have enough space around them to make them distinct, especially for buttons on a neutral background.
Content
Use active language that reflects what will happen next. Be brief. Usually a single verb is best, but include a noun if it increases clarity.
