Button

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.

Link

<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
  Primary
</Button>
<Button variant="contained" color="secondary">
  Secondary
</Button>
<Button variant="contained" disabled>
  Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
  Link
</Button>

You can remove the elevation with the disableElevation prop.

<Button variant="contained" color="primary" disableElevation>
  Disable elevation
</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

<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons" color="primary">
  Link
</Button>

Outlined Buttons

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

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

Link

<Button variant="outlined">Default</Button>
<Button variant="outlined" color="primary">
  Primary
</Button>
<Button variant="outlined" color="secondary">
  Secondary
</Button>
<Button variant="outlined" disabled>
  Disabled
</Button>
<Button variant="outlined" color="primary" href="#outlined-buttons">
  Link
</Button>

Handling clicks

All components accept an onClick handler that is applied to the root DOM element.

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  Click me
</Button>

Note that the documentation avoids mentioning native props (there are a lot) in the API section of the components.

Upload button

Upload

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.

<IconButton aria-label="delete">
  <DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
  <DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
  <AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
  <AddShoppingCartIcon />
</IconButton>

Customized buttons

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

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

Loading buttons

The loading buttons can show pending state and disable interactions.

<LoadingButton variant="outlined" pending>
  Submit
</LoadingButton>
<LoadingButton variant="outlined" pending pendingIndicator="Loading...">
  Fetch data
</LoadingButton>
<LoadingButton
  variant="outlined"
  pending
  pendingPosition="start"
  startIcon={<SaveIcon />}
>
  Save
</LoadingButton>

Toggle the switch to see the transition between the different states.

Pending

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.

Here is an integration example with react-router.

Limitations

Cursor not-allowed

The ButtonBase component sets pointer-events: none; on disabled buttons, which prevents the appearance of a disabled cursor.

If you wish to use not-allowed, you have two options:

CSS only. You can remove the pointer events style on the disabled state of the <button> element:

.MuiButtonBase-root:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

However:

You should add pointer-events: none; back when you need to display tooltips on disabled elements.
The cursor won't change if you render something other than a button element, for instance, a link <a> element.

DOM change. You can wrap the button:

<span style={{ cursor: 'not-allowed' }}>
  <Button component={Link} disabled>
    disabled
  </Button>
</span>

This has the advantage of supporting any element, for instance, a link <a> element.