Use Material-ui buttons and Material-ui custom styles for actions in
forms, dialogues, and more with support for multiple sizes, states,
and more.
Examples
Material-UI includes several predefined button styles, each serving
its own semantic purpose, with a few extras thrown in for more
control.
Button
With icon
import React from " react " ;
// @material-ui/core components
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
import Archive from " @material-ui/icons/Archive " ;
import Grain from " @material-ui/icons/Grain " ;
// core components
function Example () {
return (
<>
< Button color = " primary " variant = " contained " >
Button
< /Button >
< br />
< br />
< Button color = " primary " variant = " contained " >
< Box
component = { Archive }
marginRight = " .75em "
top = " 2px "
position = " relative "
/>
With Icons
< /Button >
< br />
< br />
< Button color = " primary " variant = " contained " >
< Box
component = { Grain }
top = " 2px "
position = " relative "
/>
< /Button >
< / >
);
}
export default Example ;
Default Primary
Secondary Info Success Danger Warning
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/button.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const buttonInfoClasses = {
root : classes . buttonContainedInfo ,
};
const buttonSuccessClasses = {
root : classes . buttonContainedSuccess ,
};
const buttonErrorClasses = {
root : classes . buttonContainedError ,
};
const buttonWarningClasses = {
root : classes . buttonContainedWarning ,
};
return (
<>
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " contained " > Default < /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button color = " primary " variant = " contained " >
Primary
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button color = " secondary " variant = " contained " >
Secondary
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " contained " classes = { buttonInfoClasses } >
Info
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " contained " classes = { buttonSuccessClasses } >
Success
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " contained " classes = { buttonErrorClasses } >
Error
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " contained " classes = { buttonWarningClasses } >
Warning
< /Button >
< /Box >
< / >
);
}
export default Example ;
In need of a button, but not the hefty background colors they bring?
Replace the default modifier styles by adding
outlined
variant prop to remove all background images and colors on any
button.
Default
Primary
Secondary
Info
Success
Danger
Warning
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/button.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const buttonInfoClasses = {
root : classes . buttonOutlineInfo ,
};
const buttonSuccessClasses = {
root : classes . buttonOutlineSuccess ,
};
const buttonErrorClasses = {
root : classes . buttonOutlineError ,
};
const buttonWarningClasses = {
root : classes . buttonOutlineWarning ,
};
return (
<>
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " outlined " > Default < /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button color = " primary " variant = " outlined " >
Primary
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button color = " secondary " variant = " outlined " >
Secondary
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " outlined " classes = { buttonInfoClasses } >
Info
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " outlined " classes = { buttonSuccessClasses } >
Success
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " outlined " classes = { buttonErrorClasses } >
Error
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button variant = " outlined " classes = { buttonWarningClasses } >
Warning
< /Button >
< /Box >
< / >
);
}
export default Example ;
Sizes
Fancy larger or smaller buttons? Add
size="large"
or
size="small"
for additional sizes.
Large button
Large button
Small button
Small button
import React from " react " ;
// @material-ui/core components
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
function Example () {
return (
<>
< Box display = " inline-block " marginRight = " 1rem " >
< Button size = " small " color = " primary " variant = " contained " >
Small button
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button size = " small " color = " secondary " variant = " contained " >
Small button
< /Button >
< /Box >
< / >
);
}
export default Example ;
Create block level buttons—those that span the full width of a
parent—by adding
fullWidth
prop.
Block level button
Block level button
import React from " react " ;
// @material-ui/core components
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
function Example () {
return (
<>
< Button color = " primary " variant = " contained " fullWidth >
Block level
< /Button >
< br />
< br />
< Button color = " secondary " variant = " contained " fullWidth >
Block level
< /Button >
< / >
);
}
export default Example ;
Active state
If you want to add active states to your buttons, we’ve created the
following classes
buttonActive
,
buttonActivePrimary
,
buttonActiveSecondary
,
buttonActiveInfo
,
buttonActiveSuccess
,
buttonActiveError
,
buttonActiveWarning
.
Primary link
Link
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/button.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const buttonPrimaryClasses = {
root : classes . buttonActivePrimary ,
};
const buttonSecondaryClasses = {
root : classes . buttonActiveSecondary ,
};
return (
<>
< Box display = " inline-block " marginRight = " 1rem " >
< Button
color = " primary "
variant = " contained "
classes = { buttonPrimaryClasses }
>
Primary link
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button
color = " secondary "
variant = " contained "
classes = { buttonSecondaryClasses }
>
Link
< /Button >
< /Box >
< / >
);
}
export default Example ;
Disabled state
Primary button
Button
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/button.js " ;
const useStyles = makeStyles ( componentStyles );
function Example () {
const classes = useStyles ();
const buttonPrimaryClasses = {
root : classes . buttonDisabled ,
};
const buttonSecondaryClasses = {
root : classes . buttonDisabled ,
};
return (
<>
< Box display = " inline-block " marginRight = " 1rem " >
< Button
color = " primary "
variant = " contained "
classes = { buttonPrimaryClasses }
>
Primary link
< /Button >
< /Box >
< Box display = " inline-block " marginRight = " 1rem " >
< Button
color = " secondary "
variant = " contained "
classes = { buttonSecondaryClasses }
>
Link
< /Button >
< /Box >
< / >
);
}
export default Example ;
Props
If you want to see more examples and properties please check the
official
Material-UI Documentation .