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>