Button

Buttons allow users to take actions, and make choices, with a single tap.

<Button>Button</Button>

Props

Prop	Type	Default	Description
children	node		The content of the button.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'default' \| 'inherit' \| 'primary' \| 'secondary' \| 'white' \| 'black'	'default'	The color of the component. It supports those theme colors that make sense for this component.
component	elementType	'button'	The component used for the root node. Either a string to use a HTML element or a component.
disabled	bool	false	If true, the button will be disabled.
disableElevation	bool	false	If true, no elevation is used.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
endIcon	node		Element placed after the children.
fullWidth	bool	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.
size	'extraLarge' \| 'large' \| 'medium' \| 'small'	'medium'	The size of the button. small is equivalent to the dense button styling.
startIcon	node		Element placed before the children.
variant	'contained' \| 'outlined' \| 'circular' \| 'extended '\| 'text'	'contained'	The variant to use. ⚠️circular and extended to be used only with fab tag.
adminColor	bool	false	If true, semantic blue color is considered as primary color
fab	bool	false	If true, the floating action button will be used

Examples

Simple

<Button
  style={{ margin: '8px 0' }}
  onClick={() => console.log('clicked primary')}
>
  Primary
</Button>
<Button
  disabled
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked primary')}
>
  Primary
</Button>
<br />
<Button
  style={{ margin: '8px 0' }}
  onClick={() => console.log('clicked secondary')}
  color="secondary"
>
  Secondary
</Button>
<Button
  disabled
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked secondary')}
  color="secondary"
>
  Secondary
</Button>
<br />
<div style={{ backgroundColor: '#000', padding: 4 }}>
  <Button
    style={{ margin: '8px 0' }}
    onClick={() => console.log('clicked white')}
    color="white"
  >
    White
  </Button>
  <Button
    disabled
    style={{ marginLeft: 8 }}
    onClick={() => console.log('clicked white')}
    color="white"
  >
    White
  </Button>
</div>
<Button
  style={{ margin: '8px 0' }}
  onClick={() => console.log('clicked black')}
  color="black"
>
  Black
</Button>
<Button
  disabled
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked black')}
  color="black"
>
  Black
</Button>
<br/>
<Button
  style={{ margin: '8px 0' }}
  onClick={() => console.log('clicked black')}
  color="error"
>
  Error
</Button>
<Button
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked black')}
  disabled
  color="error"
>
  Error
</Button>

Icon

<Button
  style={{ margin: '8px 0' }}
  onClick={() => console.log('clicked primary')}
  startIcon={<Trophy />}
>
  Primary
</Button>
<Button
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked secondary')}
  endIcon={<Trophy />}
  color="secondary"
>
  Secondary
</Button>
<Button
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked white')}
  endIcon={<Trophy />}
  color="white"
>
  White
</Button>
<Button
  style={{ marginLeft: 8 }}
  onClick={() => console.log('clicked black')}
  endIcon={<Trophy />}
  color="black"
>
  Black
</Button>

Icon Button

<IconButton sx={{ marginRight: '8px' }} onClick={() => console.log('clicked Add icon')}>
  <Add />
</IconButton>
<IconButton sx={{ marginRight: '8px' }} onClick={() => console.log('clicked Minus icon')}>
  <Minus />
</IconButton>
<IconButton sx={{ marginRight: '8px' }} onClick={() => console.log('clicked Chart icon')}>
  <Chart />
</IconButton>
<IconButton disabled  onClick={() => console.log('clicked Download icon')}>
  <Download />
</IconButton>

Text

<h4>Medium</h4>
<div >
  <Button
    variant="text"
    onClick={() => console.log('clicked text primary')}
    style={{marginRight: 8}}
  >
    Text Primary
  </Button>
  <Button
    variant="text"
    startIcon={<Trophy />}
    onClick={() => console.log('clicked text primary')}
  >
    Text Primary
  </Button>
  <Button
    variant="text"
    disabled
    endIcon={<Trophy />}
  >
    Text Primary Disabled
  </Button>
</div>
<div >
  <Button
    variant="text"
    color="secondary"
    href="#link1"
    buttonType="secondary"
    style={{marginRight: 8}}
    onClick={() => console.log('clicked text secondary')}
  >
    Text Secondary
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="secondary"
    startIcon={<Trophy />}
    style={{ margin: '1px 0' }}
    onClick={() => console.log('clicked text secondary')}
  >
    Text Secondary
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="secondary"
    disabled
    endIcon={<Trophy />}
    style={{ marginLeft: 1 }}
  >
    Text Secondary Disabled
  </Button>
</div>
<div>
  <Button
    variant="text"
    color="secondary"
    href="#link1"
    buttonType="danger"
    style={{marginRight: 8}}
    onClick={() => console.log('clicked text secondary')}
  >
    Text Danger
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="danger"
    startIcon={<Agenda />}
    style={{ margin: '1px 0'}}
    onClick={() => console.log('clicked text secondary')}
  >
    Text Danger
  </Button>
  <Button
    variant="text"
    buttonType="danger"
    color="secondary"
    disabled
    endIcon={<Agenda />}
    style={{ margin: '1px 0' }}
  >
    Text Danger Disabled
  </Button>
</div>
<h4>Small</h4>

<div >
  <Button
    variant="text"
    onClick={() => console.log('clicked text primary')}
    style={{marginRight: 8}}
    size="small"
  >
    Text Primary
  </Button>
  <Button
    variant="text"
    startIcon={<Trophy />}
    onClick={() => console.log('clicked text primary')}
    size="small"
  >
    Text Primary
  </Button>
  <Button
    variant="text"
    disabled
    size="small"
    endIcon={<Trophy />}
  >
    Text Primary Disabled
  </Button>
</div>
<div >
  <Button
    variant="text"
    color="secondary"
    href="#link1"
    buttonType="secondary"
    style={{marginRight: 8}}
    onClick={() => console.log('clicked text secondary')}
    size="small"
  >
    Text Secondary
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="secondary"
    startIcon={<Trophy />}
    style={{ margin: '1px 0' }}
    onClick={() => console.log('clicked text secondary')}
    size="small"
  >
    Text Secondary
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="secondary"
    disabled
    endIcon={<Trophy />}
    style={{ marginLeft: 1 }}
    size="small"
  >
    Text Secondary Disabled
  </Button>
</div>
<div>
  <Button
    variant="text"
    color="secondary"
    href="#link1"
    buttonType="danger"
    style={{marginRight: 8}}
    onClick={() => console.log('clicked text secondary')}
    size="small"
  >
    Text Danger
  </Button>
  <Button
    variant="text"
    color="secondary"
    buttonType="danger"
    startIcon={<Agenda />}
    style={{ margin: '1px 0'}}
    onClick={() => console.log('clicked text secondary')}
    size="small"
  >
    Text Danger
  </Button>
  <Button
    variant="text"
    buttonType="danger"
    color="secondary"
    disabled
    endIcon={<Agenda />}
    style={{ margin: '1px 0' }}
    size="small"
  >
    Text Danger Disabled
  </Button>
</div>

Button with Dot loader

() => {
  const [loading, setLoading] = React.useState(false);
  const onClick = () => {
    setLoading(!loading);
  };
  return (
    <Button loading={loading} onClick={onClick}>
      Click Me
    </Button>
  );
};

Size

<Button size="extraLarge" style={{marginRight: 8}}>A large Button</Button>
<Button style={{marginRight: 8}}>Button</Button>
<Button size="small">Button</Button>

Floating Action Button

<Button fab sx={{margin: '8px 0'}}>
  Button
</Button>
<Button fab sx={{marginLeft: '8px'}}>
  <Agenda sx={{marginRight: '8px'}} />Button
</Button>
<Button fab sx={{marginLeft: '8px'}}>
  Button  <Agenda sx={{marginLeft: '8px'}} />
</Button>
<Button fab variant="circular" sx={{marginLeft: '8px'}}>
  <Agenda />
</Button>
<br />
<Button disabled fab sx={{margin: '8px 0'}}>
  Button
</Button>
<Button disabled fab sx={{ marginLeft: '8px' }}>
  <Agenda sx={{marginRight: '8px'}} />Button
</Button>
<Button disabled fab sx={{marginLeft: '8px'}}>
  Button <Agenda sx={{ marginLeft: '8px' }} />
</Button>
<Button disabled fab variant="circular" sx={{marginLeft: '8px'}}>
  <Agenda />
</Button>