Icon Button

An Icon Button is a button with only an icon and no visible label text. It is best used for well-known actions with commonly understood icons (e.g. "edit", "delete") and in the direct context of the affected objects (e.g. inside a Tile).

Compared to the Button component, Icon Buttons feature an additional state called highlight. Use it to indicate that a related action or function is active (for instance, when indicating the sorting order in a list).

Example

Live Editor

<IconButton iconName="Edit" aria-label="Edit" kind="warning" onClick={() => { /* do something */ }} />

<IconButton
  iconName="Edit"
  aria-label="Edit"
  kind="warning"
  onClick={() => {
    /* do something */
  }}
/>

Result

Loading...

Usage Rules

Do:

• Use Icon Buttons for contextual actions (e.g. export a chart)
• Add a Tooltip, especially if the icon is not commonly understood (e.g. share)
• Always label the IconButton in your code (You can find more information about this here)

Don’t:

• Mix Icon Buttons of different sizes in the same button group
• Use Icon Buttons for primary actions
• Use the highlight state to simply accentuate an Icon Button

Variants

Disabled

Add the disabled property to visually indicate that an Icon Button is disabled. The user won't be able to click it.

Live Editor

<IconButton iconName="Trash" aria-label="Delete" disabled />

<IconButton iconName="Trash" aria-label="Delete" disabled />

Result

Loading...

Highlighted

The isHighlighted property indicates that the related to the Button action or function is activated. For instance, in the following example, if an object is set to visible.

Live Editor

<> <IconButton iconName="EyeClosed" aria-label="Show Something" /> <IconButton iconName="Eye" aria-label="Hide Something" isHighlighted /> </>

<>
  <IconButton iconName="EyeClosed" aria-label="Show Something" />
  <IconButton iconName="Eye" aria-label="Hide Something" isHighlighted />
</>

Result

Loading...

Hover

The isHovered property indicates hover state of IconButton.

Live Editor

<> <IconButton iconName="CogWheel" aria-label="Settings" /> <IconButton iconName="CogWheel" aria-label="Settings" isHovered /> <IconButton iconName="CogWheel" aria-label="Settings" kind="primary" isHovered /> </>

<>
  <IconButton iconName="CogWheel" aria-label="Settings" />
  <IconButton iconName="CogWheel" aria-label="Settings" isHovered />
  <IconButton
    iconName="CogWheel"
    aria-label="Settings"
    kind="primary"
    isHovered
  />
</>

Result

Loading...

Icon Badge

The icon badge is a colored dot that acts as a user indication to action. By default it is set to false and can be initiated using the iconBadge prop. Position is also set by default but can be moved using the iconBadgeOffset prop, which takes an array of numbers [x,y]. Sizes and colors follow those set on the IconButton component.

Live Editor

<> <IconButton iconName="SpeechBubble" aria-label="Show Something" iconBadge/> <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted iconBadge/> <IconButton iconName="SpeechBubble" aria-label="Show Something" size="small" iconBadge/> <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted size="small" iconBadge/> <IconButton iconName="SpeechBubble" aria-label="Show Something" iconBadge iconBadgeOffset={[-16,0]}/> <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted size="small" iconBadge iconBadgeOffset={[0,10]}/> </>

<>
  <IconButton iconName="SpeechBubble" aria-label="Show Something" iconBadge/>
  <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted iconBadge/>

  <IconButton iconName="SpeechBubble" aria-label="Show Something" size="small" iconBadge/>
  <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted size="small" iconBadge/>

  <IconButton iconName="SpeechBubble" aria-label="Show Something" iconBadge iconBadgeOffset={[-16,0]}/>
  <IconButton iconName="SpeechBubble" aria-label="Hide Something" isHighlighted size="small" iconBadge iconBadgeOffset={[0,10]}/>
</>

Result

Loading...

Kind

The Icon Button comes in six kinds: light, dark, 'primary', 'positive', 'warning', 'negative'.

Live Editor

<> <IconButton iconName="CogWheel" kind="light" aria-label="Settings" /> <IconButton iconName="CogWheel" kind="dark" aria-label="Settings" /> <IconButton iconName="CogWheel" kind="primary" aria-label="Settings" /> <IconButton iconName="CogWheel" kind="positive" aria-label="Settings" /> <IconButton iconName="CogWheel" kind="warning" aria-label="Settings" /> <IconButton iconName="CogWheel" kind="negative" aria-label="Settings" /> </>

<>
  <IconButton iconName="CogWheel" kind="light" aria-label="Settings" />
  <IconButton iconName="CogWheel" kind="dark" aria-label="Settings" />
  <IconButton iconName="CogWheel" kind="primary" aria-label="Settings" />
  <IconButton iconName="CogWheel" kind="positive" aria-label="Settings" />
  <IconButton iconName="CogWheel" kind="warning" aria-label="Settings" />
  <IconButton iconName="CogWheel" kind="negative" aria-label="Settings" />
</>

Result

Loading...

Sizes

The Icon Button comes in two sizes: small and medium.

Live Editor

<> <IconButton iconName="CogWheel" size="small" aria-label="Settings" /> <IconButton iconName="CogWheel" size="medium" aria-label="Settings" /> </>

<>
  <IconButton iconName="CogWheel" size="small" aria-label="Settings" />
  <IconButton iconName="CogWheel" size="medium" aria-label="Settings" />
</>

Result

Loading...

Tooltip

Since an Icon Button doesn’t have a visual label, it is a good idea to add a Tooltip to describe the action of the button. This is especially true if the icon is not commonly understood.

Live Editor

<Tooltip content="Share"> <IconButton iconName="Share" aria-label="Share" /> </Tooltip>

  <Tooltip content="Share">
    <IconButton iconName="Share" aria-label="Share" />
  </Tooltip>

Result

Loading...

Examples

Working with MouseEvent

Here is an example for using MouseEvents in IconButton.

Live Editor

<IconButton iconName="Edit" aria-label="Edit" kind="primary" onMouseEnter={() => console.log('enter')} onMouseLeave={() => console.log('leave')} />

<IconButton
  iconName="Edit"
  aria-label="Edit"
  kind="primary"
  onMouseEnter={() => console.log('enter')}
  onMouseLeave={() => console.log('leave')}
/>

Result

Loading...

If IconButton has Tooltip, we should add MouseEvents with an outer div. Because Tooltip component is using IconButton MouseEvents to show/hide its content.

Live Editor

<div onMouseEnter={() => console.log('enter with tooltip')} onMouseLeave={() => console.log('leave with tooltip')} > <Tooltip content="Share"> <IconButton iconName="Share" aria-label="Share" /> </Tooltip> </div>

<div 
  onMouseEnter={() => console.log('enter with tooltip')}
  onMouseLeave={() => console.log('leave with tooltip')} >
    <Tooltip content="Share">
      <IconButton iconName="Share" aria-label="Share" />
    </Tooltip>
</div>

Result

Loading...

Props

Name	Type	Default
iconName * Please refer to the full list here: Link	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
type Native HTML attribute: Link	"button" | "submit" | "reset"	"button"
size Size of the IconButton	"small" | "medium"	"medium"
kind Kind of the IconButton	"negative" | "positive" | "warning" | "primary" | "dark" | "light"	"light"
isHovered Indicates hover state of component	boolean	—
isHighlighted Indicates whether the option represented by the button is active	boolean	false
onMouseLeave Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onMouseEnter Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onFocus Native HTML callback: Link	FocusEventHandler<HTMLButtonElement>	—
onClick Native HTML callback: Link	MouseEventHandler<HTMLButtonElement>	—
onBlur Native HTML callback: Link	FocusEventHandler<HTMLButtonElement>	—
disabled Native HTML attribute: Link	boolean	—
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link	string	—
iconBadge Indicates whether the button has a badge	boolean	false
iconBadgeOffset Offset of the badge	number[]	"[0, 0]"
isLoading	boolean	—
as Support for Link Element	ElementType<any>	—
to	string | Record<string, unknown>	—
href	string	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
ref	Ref<HTMLButtonElement>	—
key	Key | null	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

Related Components

• Button
• Icon