Skip to content

Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Dialogs
  • Modal windows
  • Forms
  • Cards
  • Toolbars

Buttons that are supported for native:

  • Contained buttons
  • Text buttons
  • Outlined buttons

Contained Buttons

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app.

The last example of this demo show how to use an upload button.

Text Buttons

Text buttons are typically used for less-pronounced actions, including those located:

  • In dialogs
  • In cards
  • In cards, text buttons help maintain an emphasis on card content.
Link

Outlined Buttons

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app.

Alternatives

Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons.

Grouped Buttons

The ButtonGroup component can be used to group outlined (the default) or contained buttons

Split Button

ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action

Floating Action Buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended.

Only use a FAB if it is the most suitable way to present a screen’s primary action.

Only one floating action button is recommended per screen to represent the most common action.

Sizes

Fancy larger or smaller buttons? Use the size property.

Buttons with icons and label

Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon.

Icon Buttons

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

Customized buttons

Here are some examples of customizing the component. You can learn more about this in the overrides documentation page.

Complex Buttons

The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the ButtonBase. You can take advantage of this lower level component to build custom interactions.

Third-party routing library

One common use case is to use the button to trigger navigation to a new page. The ButtonBase component provides a property to handle this use case: component. However for certain focus polyfills ButtonBase requires the DOM node of the provided component. This is achieved by attaching a ref to the component and expecting that the component forwards this ref to the underlying DOM node. Given that many of the interactive components rely on ButtonBase, you should be able to take advantage of it everywhere.