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

• Modal windows
• Forms
• Cards
• Toolbars

Basic button

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

<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
                    

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.

<Button>Primary</Button>
<Button disabled>Disabled</Button>
<Button href="#text-buttons">Link</Button>
                    

Contained button

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

<Button variant="contained">Contained</Button>
<Button variant="contained" disabled>
    Disabled
</Button>
<Button variant="contained" href="#contained-buttons">
    Link
</Button>
                    

You can remove the elevation with the disableElevation prop.

<Button variant="contained" disableElevation>
    Disable elevation
</Button>
                    

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.

<Button variant="outlined">Primary</Button>
<Button variant="outlined" disabled>
    Disabled
</Button>
<Button variant="outlined" 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.

Color

<Button color="secondary">Secondary</Button>
<Button variant="contained" color="success">
    Success
</Button>
<Button variant="outlined" color="error">
    Error
</Button>
                    

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.

Color

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.

Buttons with icon 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.

<Button variant="outlined" startIcon=<DeleteIcon />>
    Delete
</Button>
<Button variant="contained" endIcon=<SendIcon />>
    Send
</Button>

                    

Color

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