Button

Buttons allow users to take actions with a single tap.

Basic usage

The Button comes with four variants: filled, tonal, outlined and text.

<Button>Save</Button>
<Button variant="tonal">Save</Button>
<Button variant="outlined">Save</Button>
<Button variant="text">Save</Button>

Adding icons

You can add icons by supplying startIcon and endIcon props:

<Button startIcon={<Heart />}>Save</Button>
<Button endIcon={<Heart />}>Save</Button>

States

Disabled

You can disable the Button using the isDisabled prop:

<Button isDisabled>Save</Button>
<Button variant="tonal" isDisabled>
  Save
</Button>
<Button variant="outlined" isDisabled>
  Save
</Button>
<Button variant="text" isDisabled>
  Save
</Button>