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
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.
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.
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.
The floating action button animates onto the screen as an expanding piece of material, by default.
A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.
The Zoom transition can be used to achieve this. Note that since both the exiting and entering
animations are triggered at the same time, we use enterDelay
to allow the outgoing Floating Action Button's
animation to finish before the new one enters.
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
If you have been reading the overrides documentation page but you are not confident jumping in, here are examples of how you can change the main color of a Button using classes, and using a theme; and of a Bootstrap style Button.
⚠️ While the material design specification encourages theming, these examples are off the beaten path.
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 a navigation to a new page.
The ButtonBase
component provides a property to handle this use case: component
.
Given that a lot of our interactive components rely on ButtonBase
, you should be
able to take advantage of it everywhere:
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';
<Button component={Link} to="/open-collective">
Link
</Button>
or if you want to avoid properties collisions:
import { Link } from 'react-router-dom'
import Button from '@material-ui/core/Button';
const MyLink = props => <Link to="/open-collective" {...props} />
<Button component={MyLink}>
Link
</Button>
Note: Creating MyLink
is necessary to prevent unexpected unmounting. You can read more about it in our composition guide.