# Core/IconButton - Design

Interactive element displaying a single icon.

## Properties

### Icon

<p>
  Icon buttons are used to quickly identify available actions.
</p>

<p>
  Common actions, like save or search, can omit titles and use the icon alone. Avoid using an icon alone when the meaning is ambiguous, unclear, or unfamiliar.
</p>

<p>
  View available icons in the Icon library.
</p>

### Size

<p>
  Buttons are available in small, medium, and large sizes. Medium is the default size and is preferred in most situations.
</p>

<p>
  Small buttons are primarily used when buttons appear inline with over components, such as in a popover and to conserve space.
</p>

### Loading

<p>
  Buttons can show a loading state for actions that take longer to respond.
</p>

<p>
  The loading spinner is shown in the leading icon slot, replacing an icon if present. Button text should be updated to indicate the action currently taking place. Further interaction is disabled until the action is complete. 
</p>

## Behavior

### Tooltips

<p>
  Icon buttons reveal the label in a tooltip on hover or long-press.
</p>

<img src="images/guidelines/iconbutton/behavior-tooltip.png" />

### Loading delay

<p>
  Buttons can show a loading state for actions that take longer to respond.
</p>

<p>
  The loading spinner is shown in place of the icon. Further interaction is disabled until the action is complete.
</p>

### State

<p>
  Buttons use a color shift between palette indexes for interaction states. The available sates are enabled, hover, active, focused, disabled, and pending.
</p>

<img src="images/guidelines/iconbutton/behavior-state.png" />

## Accessibility

### Keyboard interaction

All buttons exist in the page’s natural tab sequence, reachable via TAB and SHIFT+TAB keys. Pressing SPACEBAR or ENTER activates the focused button.

### Labeling

<p>
  For buttons with an icon and text, if the icon reinforces the text, do not add any description of the icon as it would be redundant.
</p>

<p>
  If the icon adds important information that is not explained in the text, then the label of the button must begin with the text with any extra information about the icon following the text.  This order supports users who control their device with speech.
</p>

<p>
  Icon buttons without text must have an easily identifiable (for speech users) accessible label, such as “Download.”
</p>