Text buttons are generally used when an action is less important or should not be the user's main focus. This is the default button theme type and allows you to create a button with no additional props (other than children):

<Button>Button</Button>

These types of buttons are normally placed with the @react-md/dialog or @react-md/card packages and components.

Outline buttons have a bit more emphasis than text buttons since they have an additional outline color. They should generally be used in places that aren't the primary action in the app, but should still be noticeable. You can create outlined buttons by adding a new prop: themeType="outline".

Contained buttons have high emphasis as they have an entire color fill and shadow. Contained buttons can be created by setting the themeType="contained" prop.

Note that the clear prop still works for a contained button but looks extremely out of place most of the time since it just gains the surface theme background color. It is generally recommended to not use the clear theme for contained buttons or add a custom theme override for it instead.

Icon Buttons are great when you have limited space and an icon that is well known/self-describing. Common places for icon buttons are within the @react-md/app-bar or as expansion toggles. You will need to install the @react-md/icon and include the styles for icons for these types of buttons. It is also recommended to install the @react-md/material-icons package for all the material icons pre-built as React components.

Unfortunately, icon buttons are not as accessible out of the box for screen readers as they normally do not have text within them. Material Icons is an exemption to this since their font icons are rendered based on the text content, but other font icon libraries or SVG icons normally do not have text for a screen reader to read. In these cases, you should apply an aria-label or aria-labelledby to the button and optionally using a @react-md/tooltip to add an extra description.

When you have the additional room, it is also possible to render icons with text within buttons using the TextIconSpacing component from @react-md/icon.

Buttons can also be rendered as a floating action button (FAB) by setting the floating prop to a position to render within the viewport. The default available positions are:

• "top-left"
• "top-right"
• "bottom-left"
• "bottom-right"

Even though this example will show within a phone on larger screen sizes, these type of buttons do not need to be mobile only.

If you have the @react-md/progress package installed, the Button component will automatically update the size of any child CircularProgress to be the same size as an icon. Since you'll normally want to prevent the button from being interactable while displaying a loading spinner, you can set the button's theme to "disabled" which will make the button look and behave as if it was disabled without actually enabling the disabled attribute so that it is still keyboard focusable.

This example will show how you can add a CircularProgress as a child with the TextIconSpacing component as well as showing the "disabled" theme behavior.

You can also check out the progress bars within buttons demo for a more complex example as well as using the LinearProgress component.

Since it might not be desired to have the same material design theme for your app, it is possible to update the base button theme by updating the different button SCSS variables before importing and including the button styles. If you have not done so, please read the pretty good write up in the theme documentation for all the detailed theming information. It's also recommended to read the states documentation to read about disable the ripple effect or custom interaction states as well.