Button

Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.

<Button>
  Hello
</Button>
<div>
  <Button size='large' mr={2}>
    Large
  </Button>
  <Button size='medium' mr={2}>
    Medium
  </Button>
  <Button size='small'>
    Small
  </Button>
</div>

Props

PropTypeDescription
radiusstringCustom button radius in pixel
sizestringSets button size to small, medium or large
widthnumber, string, or arraySets button width
variationfill, outlineThe button variation
colorstringThe color of the button, defaults to primary
disabledboolDisabled the button and apply light color

Variations

fill (default)

<Button>Button</Button>

outline

<Button variation="outline">Outline Button</Button>

Color

You can choose any palette or theme color for Button.

<Button color="secondary">Button</Button>

Uses the color from theme.palette.secondary.base, and theme.palette.secondary.dark for hover.

<Button variation="outline" color="error">Button</Button>

Uses the color from theme.palette.error.base, and theme.palette.error.dark for hover.