Button

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

<Button>Button</Button>

Props

PropTypeDefaultDescription
childrennodeThe content of the button.
classesobjectOverride 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.
componentelementType'button'The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalseIf true, the button will be disabled.
disableElevationboolfalseIf true, no elevation is used.
disableFocusRippleboolfalseIf true, the keyboard focus ripple will be disabled.
disableRippleboolIf 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.
endIconnodeElement placed after the children.
fullWidthboolfalseIf true, the button will take up the full width of its container.
hrefstringThe 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.
startIconnodeElement placed before the children.
variant'contained' | 'outlined' | 'text''contained'The variant to use.
adminColorboolfalseIf true, semantic blue color is considered as primary color

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>

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 onClick={() => console.log('clicked Add icon')}>
<Add />
</IconButton>
<IconButton style={{ marginLeft: 8 }} onClick={() => console.log('clicked Minus icon')}>
<Minus />
</IconButton>
<IconButton style={{ marginLeft: 8 }} onClick={() => console.log('clicked Chart icon')}>
<Chart />
</IconButton>
<IconButton disabled style={{ marginLeft: 8 }} onClick={() => console.log('clicked Download icon')}>
<Download />
</IconButton>

Text

<Button
variant="text"
style={{ margin: '1px 0' }}
onClick={() => console.log('clicked text primary')}
>
Text Primary
</Button>
<Button
variant="text"
startIcon={<Trophy />}
style={{ margin: '1px 0' }}
onClick={() => console.log('clicked text primary')}
>
Text Primary
</Button>
<Button
variant="text"
disabled
endIcon={<Trophy />}
style={{ marginLeft: 1 }}
>
Text Primary Disabled
</Button>
<br />
<Button
variant="text"
color="secondary"
href="#link1"
buttonType="secondary"
style={{ margin: '1px 0' }}
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>
<br />
<Button
variant="text"
color="secondary"
href="#link1"
buttonType="danger"
style={{ margin: '1px 0'}}
onClick={() => console.log('clicked text secondary')}
>
Text Secondary
</Button>
<Button
variant="text"
color="secondary"
buttonType="danger"
startIcon={<Agenda />}
style={{ margin: '1px 0'}}
onClick={() => console.log('clicked text secondary')}
>
Text Secondary
</Button>
<Button
variant="text"
buttonType="danger"
color="secondary"
disabled
endIcon={<Agenda />}
style={{ margin: '1px 0' }}
>
Text Secondary Disabled
</Button>

Button with Dot loader

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

Extra large size

<Button size="extraLarge">A large Button</Button>