Icon toggle

IconToggle renders an icon the same way Icon does, and animates the change whenever you swap the icon for another one.

Pass the id property to describe which icon is currently rendered. IconToggle compares it between renders and starts the animation whenever the value changes, which means it can be anything that identifies the state: a boolean, a number or a string.

<Button
  onClick={playToggle.toggle}
  attributes={{ "aria-label": playToggle.active ? "Pause" : "Play" }}
  rounded
  icon={
    <IconToggle
      svg={playToggle.active ? PauseIcon : PlayIcon}
      id={playToggle.active}
    />
  }
/>

Besides id, IconToggle accepts all the properties of the Icon utility, including size, color and autoWidth. That makes it a drop-in replacement anywhere you already render an Icon and want the change to animate, and lets the icon transition its color together with its shape.

• Like Icon, IconToggle is hidden from assistive technologies, so make sure the element wrapping it describes the current state, for example with an aria-label on the button using it