Skip to main content
Buttons allow users to take actions and make choices with a single tap. They communicate actions that users can take.

​
Import

import Button from '@mui/material/Button';

​
Basic Usage

import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

​
Props

​
variant
'text' | 'outlined' | 'contained'
default:"'text'"
The variant to use. Determines the button’s visual style.
​
color
'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
The size of the component. small is equivalent to the dense button styling.
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
disableElevation
boolean
default:"false"
If true, no elevation is used.
​
disableFocusRipple
boolean
default:"false"
If true, the keyboard focus ripple is disabled.
​
fullWidth
boolean
default:"false"
If true, the button will take up the full width of its container.
​
href
string
The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
​
loading
boolean | null
default:"null"
If true, the loading indicator is visible and the button is disabled.
​
loadingIndicator
ReactNode
Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default, it renders a CircularProgress that is labeled by the button itself.
​
loadingPosition
'start' | 'end' | 'center'
default:"'center'"
The loading indicator can be positioned on the start, end, or the center of the button.
​
startIcon
ReactNode
Element placed before the children.
​
endIcon
ReactNode
Element placed after the children.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.
​
children
ReactNode
The content of the component.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us