IconButton

Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

<IconButton onClick={() => console.log('clicked icon')}>
<MenuHamburger />
</IconButton>
<IconButton onClick={() => console.log('clicked icon')} size="small">
<MenuDots />
</IconButton>

Props

PropTypeDefaultDescription
childrennodeThe icon element.
classesobjectOverride or extend the styles applied to the component. See CSS API below for more details.
color'default' | 'inherit' | 'primary' | 'secondary''default'The color of the component. It supports those theme colors that make sense for this component.
disabledboolfalseIf true, the button will be disabled.
disableFocusRippleboolfalseIf true, the keyboard focus ripple will be disabled.
disableRippleboolIf true, the ripple effect will be disabled.
edge'start' | 'end' | falsefalseIf given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).
size'small' | 'medium''medium'The size of the button. small is equivalent to the dense button styling.

Examples

see Button