IconButton

Icon buttons are commonly found in app bars and toolbars.

Basic usage

The IconButton comes with four variants: filled, tonal, outlined and standard.

<IconButton>
  <Heart />
</IconButton>
<IconButton variant="tonal">
  <Heart />
</IconButton>
<IconButton variant="outlined">
  <Heart />
</IconButton>
<IconButton variant="standard">
  <Heart />
</IconButton>

States

Disabled

You can disable the IconButton using the isDisabled prop:

<IconButton isDisabled>
  <Heart />
</IconButton>
<IconButton variant="tonal" isDisabled>
  <Heart />
</IconButton>
<IconButton variant="outlined" isDisabled>
  <Heart />
</IconButton>
<IconButton variant="standard" isDisabled>
  <Heart />
</IconButton>