React Button Component - Material UI - MUI

Skip to contentMaterial UIv7.3.6

• Getting started
• Components
  • All components
  • Inputs
    • Autocomplete
    • Button
    • Button Group
    • Checkbox
    • Floating Action Button
    • Number FieldNew
    • Radio Group
    • Rating
    • Select
    • Slider
    • Switch
    • Text Field
    • Transfer List
    • Toggle Button
  • Data display
    • Avatar
    • Badge
    • Chip
    • Divider
    • Icons
    • Material Icons
    • List
    • Table
    • Tooltip
    • Typography
  • Feedback
    • Alert
    • Backdrop
    • Dialog
    • Progress
    • Skeleton
    • Snackbar
  • Surfaces
    • Accordion
    • App Bar
    • Card
    • Paper
  • Navigation
    • Bottom Navigation
    • Breadcrumbs
    • Drawer
    • Link
    • Menu
    • Pagination
    • Speed Dial
    • Stepper
    • Tabs
  • Layout
    • Box
    • Container
    • Grid
    • GridLegacyDeprecated
    • Stack
    • Image List
  • Utils
    • Click-Away Listener
    • CSS Baseline
    • InitColorSchemeScript
    • Modal
    • No SSR
    • Popover
    • Popper
    • Portal
    • Textarea Autosize
    • Transitions
    • useMediaQuery
  • MUI X
    • Data Grid
    • Date and Time Pickers
    • Charts
    • Tree View
  • Lab
    • About the lab 🧪
    • Masonry
    • Timeline
• Component API
• Customization
• How-to guides
• Integrations
• Experimental APIs
• Migration
• Discover more
• Design resources
• Template store

+ 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:

• Modal windows
• Forms
• Cards
• Toolbars

• MarkdownView as Markdown
• Feedback
• Bundle size
• Source
• WAI-ARIA
• Material Design
• Figma
• Sketch

Basic button

The Button comes with three variants: text (default), contained, and outlined.

TextContainedOutlined<Button variant="text">Text</Button> <Button variant="contained">Contained</Button> <Button variant="outlined">Outlined</Button><Button variant="text">Text</Button> <Button variant="contained">Contained</Button> <Button variant="outlined">Outlined</Button>Press Enter to start editing

Text button

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.

PrimaryDisabledLink<Button>Primary</Button> <Button disabled>Disabled</Button> <Button href="#text-buttons">Link</Button><Button>Primary</Button> <Button disabled>Disabled</Button> <Button href="#text-buttons">Link</Button>Press Enter to start editing

Contained button

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

ContainedDisabledLink<Button variant="contained">Contained</Button> <Button variant="contained" disabled> Disabled </Button> <Button variant="contained" href="#contained-buttons"> Link </Button><Button variant="contained">Contained</Button> <Button variant="contained" disabled> Disabled </Button> <Button variant="contained" href="#contained-buttons"> Link </Button>Press Enter to start editing

You can remove the elevation with the disableElevation prop.

Disable elevation<Button variant="contained" disableElevation> Disable elevation </Button><Button variant="contained" disableElevation> Disable elevation </Button>Press Enter to start editing

Outlined button

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.

PrimaryDisabledLink<Button variant="outlined">Primary</Button> <Button variant="outlined" disabled> Disabled </Button> <Button variant="outlined" href="#outlined-buttons"> Link </Button><Button variant="outlined">Primary</Button> <Button variant="outlined" disabled> Disabled </Button> <Button variant="outlined" href="#outlined-buttons"> Link </Button>Press Enter to start editing

Handling clicks

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

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

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

Color

SecondarySuccessError<Button color="secondary">Secondary</Button> <Button variant="contained" color="success"> Success </Button> <Button variant="outlined" color="error"> Error </Button><Button color="secondary">Secondary</Button> <Button variant="contained" color="success"> Success </Button> <Button variant="outlined" color="error"> Error </Button>Press Enter to start editing

In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the Adding new colors examples for more info.

Sizes

For larger or smaller buttons, use the size prop.

SmallMediumLargeSmallMediumLargeSmallMediumLarge

Buttons with icons and label

Sometimes you might want to have icons for certain buttons 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.

DeleteSend<Button variant="outlined" startIcon={<DeleteIcon />}> Delete </Button> <Button variant="contained" endIcon={<SendIcon />}> Send </Button><Button variant="outlined" startIcon={<DeleteIcon />}> Delete </Button> <Button variant="contained" endIcon={<SendIcon />}> Send </Button>Press Enter to start editing

Icon button

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><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>Press Enter to start editing

Sizes

For larger or smaller icon buttons, use the size prop.

<IconButton aria-label="delete" size="small"> <DeleteIcon fontSize="inherit" /> </IconButton> <IconButton aria-label="delete" size="small"> <DeleteIcon fontSize="small" /> </IconButton> <IconButton aria-label="delete" size="large"> <DeleteIcon /> </IconButton> <IconButton aria-label="delete" size="large"> <DeleteIcon fontSize="inherit" /> </IconButton><IconButton aria-label="delete" size="small"> <DeleteIcon fontSize="inherit" /> </IconButton> <IconButton aria-label="delete" size="small"> <DeleteIcon fontSize="small" /> </IconButton> <IconButton aria-label="delete" size="large"> <DeleteIcon /> </IconButton> <IconButton aria-label="delete" size="large"> <DeleteIcon fontSize="inherit" /> </IconButton>Press Enter to start editing

Colors

Use color prop to apply theme color palette to component.

<IconButton aria-label="fingerprint" color="secondary"> <Fingerprint /> </IconButton> <IconButton aria-label="fingerprint" color="success"> <Fingerprint /> </IconButton><IconButton aria-label="fingerprint" color="secondary"> <Fingerprint /> </IconButton> <IconButton aria-label="fingerprint" color="success"> <Fingerprint /> </IconButton>Press Enter to start editing

Loading

Starting from v6.4.0, use loading prop to set icon buttons in a loading state and disable interactions.

<Tooltip title="Click to see loading"> <IconButton onClick={() => setLoading(true)} loading={loading}> <ShoppingCartIcon /> </IconButton> </Tooltip><Tooltip title="Click to see loading"> <IconButton onClick={() => setLoading(true)} loading={loading}> <ShoppingCartIcon /> </IconButton> </Tooltip>Press Enter to start editing

Badge

You can use the Badge component to add a badge to an IconButton.

2<IconButton> <ShoppingCartIcon fontSize="small" /> <CartBadge badgeContent={2} color="primary" overlap="circular" /> </IconButton><IconButton> <ShoppingCartIcon fontSize="small" /> <CartBadge badgeContent={2} color="primary" overlap="circular" /> </IconButton>Press Enter to start editing

File upload

To create a file upload button, turn the button into a label using component="label" and then create a visually-hidden input with type file.

Upload files<Button component="label" role={undefined} variant="contained" tabIndex={-1} startIcon={<CloudUploadIcon />} > Upload files <VisuallyHiddenInput type="file" onChange={(event) => console.log(event.target.files)} multiple /> </Button><Button component="label" role={undefined} variant="contained" tabIndex={-1} startIcon={<CloudUploadIcon />} > Upload files <VisuallyHiddenInput type="file" onChange={(event) => console.log(event.target.files)} multiple /> </Button>Press Enter to start editing

Loading

Starting from v6.4.0, use the loading prop to set buttons in a loading state and disable interactions.

SubmitLoading…Fetch dataSaveFull widthFull widthSubmitSubmitSave

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

LoadingDisabledLoading…Fetch dataSendSaveDisabledLoading…Fetch dataSendSave

When the loading prop is set to boolean, the loading wrapper is always present in the DOM to prevent a Google Translation Crash.

The loading value should always be null or boolean. The pattern below is not recommended as it can cause the Google Translation crash:

<Button {...(isFetching && { loading: true })}> // ❌ Don't do this CopyCopied(or $keyC)

Customization

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

Custom CSSBootstrap

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

Complex button

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.

BreakfastBurgersCamera

Third-party routing library

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The ButtonBase component provides the component prop to handle this use case. Here is a more detailed guide.

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:

1. 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; } CopyCopied(or $keyC)

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.

2. DOM change. You can wrap the button:

<span style={{ cursor: 'not-allowed' }}> <Button component={Link} disabled> disabled </Button> </span> CopyCopied(or $keyC)

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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Button />
• <ButtonBase />
• <IconButton />

Contents

• Basic button
  • Text button
  • Contained button
  • Outlined button
• Handling clicks
• Color
• Sizes
• Buttons with icons and label
• Icon button
  • Sizes
  • Colors
  • Loading
  • Badge
• File upload
• Loading
• Customization
• Complex button
• Third-party routing library
• Limitations
  • Cursor not-allowed
• API

Become a Diamond sponsorMUI stands in solidarity with Ukraine.Search…