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

Button code
Android guidance

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 (FAB)

A floating action button, or FAB, highlights the primary action on a screen. It floats above all other layout elements and is persistently elevated at the bottom right of the screen, just above the navigation bar.

Behavior

Extended FABs

Choose an extended FAB when it’s helpful to include a text label in addition to the icon. This can help people interpret actions that might be unclear if represented by an icon alone. Use them in long screens that require people to scroll so the context is always apparent.

Extended FABs collapse when scrolling down to create more space for the page’s content. At the bottom of the screen and when scrolling up, the extended FAB expands to show the FAB label.

In layouts with a lot of information, extended FABs can collapse into FABs on scroll to allow more real estate for viewing content. They can extend again at the bottom of the screen.

Extended FABs keep the primary action apparent

Don’t use extended FABs in screens that don’t scroll. To show a primary action in a non-scrolling view, use a filled button instead.

Sometimes, it may be useful to bundle multiple actions for quick access. Menu FABs allow you to provide a small set of distinct but related options. For example, a user may be as likely to add a new note in OneNote as they are to take a picture or record a voice note.

In this case, a menu FAB icon can indicate a user can make an addition quickly from this screen using the add icon.

Menu FABs offer distinct but related options under one category, like adding

When someone interacts with the menu FAB, the primary action icon should change to represent the most logical action, like composing a new note. Smaller FABs with less visual weight also appear to let people add other media as notes easily.

Always use text labels with menu FABs so the actions are clear.

When the menu is open, people can take the specific action they need

Moving across tabs

When moving across tabs, FABs should briefly disappear, then reappear. This helps create contextual relationships between the FAB and the content on the screen.

Layout

Hierarchy and prominence

Choose buttons based on the importance of an action in a flow. All button types have either high, medium, or low prominence. Don’t overload a layout with buttons. Be sure to use a mix of other action components to keep a focused visual flow.

Follow Material’s guidelines for choosing and placing buttons within a layout.

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, use outline, outline accent, or subtle buttons to avoid a busy layout.

Avoid high emphasis buttons in lists and modals

Accent buttons and FABs should be used for hero scenarios, or experiences where the entire UI is calling for an action to be taken, like sign ins or upsells. 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

Button spacing

Make sure that groups of buttons have enough space around them to make them distinct, especially for buttons on a neutral background.

FAB focus order

FABs are the button with the highest visual prominence. Be sure to communicate the same level of prominence to people who use assistive technology by placing them high in the focus order.

For example, in Outlook mobile it may be helpful to read the app bar and then read the FAB directly after. This could help people take action fast without scrolling through a long list of emails.

Accessible button labels

All buttons must have labels that are accessible to screen readers. For buttons with text, the accessible labels must have the same first word as the visible label. For FABs that only have an icon, the accessible label should briefly describe the action the FAB lets someone take.

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.