Icon Buttons are buttons within Arc that only have an icon inside. These buttons are used sparingly, but are often required on complex screens.



Pairs with a Tooltip to provide context around the functionalities of the IconButton.


import { IconButton } from '@wpmedia/ads-button'
interface IconButtonProps
undefined | string

Optional label for the icon button

undefined | "bottom" | "bottom left" | "bottom right" | "bottom start" | "bottom end" | "top" | "top left" | "top right" | "top start" | "top end" | "left" | "left top" | "left bottom" | "start" | "start top" | "start bottom" | "right" | "right top" | "right bottom" | "end" | "end top" | "end bottom"

Position of the corresponding tooltip


The Icon Button component returns a button with an icon component with corresponding labels.

#Component structure

Icon Button component structure diagram
  1. Background container - This is what makes up the body of the button. This also is the hitzone for the button, accomodating touch screen devices.
  2. Icon - The icon component within the icon button. Read more about icons.


Icon buttons should be used sparingly, when the experience calls for a button that occupies less visual real estate. When considering whether an icon button is appropriate, visit these key tips:


  • Use the various button types & best practices.
  • All icon buttons must be paired with a tooltip. This is critical for building our users’ visual vocabulary, while also providing context. Some icons may not be inherently understandable without the tooltip.
Icon Button Tooltip
  • Use button states (ex. Using an icon button for delete should be red, since it is a destructive action). See button states.
  • For the icons inside the button, do not detach the coupled SVG title. This is important for screen readers. Generally, the SVG title should also match the tooltip.


  • Change any color of Icons. Icons inherit fill, hover, and other properties based on the parent element.

#Accessibility considerations:

Copyright 2021 Arc XP