IconButton

    <Arrange>
      <IconButton icon={<IconHeart />}/>
      <IconButton icon={<IconPlus />}/>
      <IconButton icon={<IconSwitch />}/>
    </Arrange>
  

    () => {
      const [activeDevice, setActiveDevice] = React.useState('desktop');
      return (
        <Arrange>
          <IconButton
            icon={<IconMonitor />}
            isActive={activeDevice === 'desktop'}
            onClick={() => setActiveDevice('desktop')}
          />
          <IconButton
            icon={<IconPhone />}
            isActive={activeDevice === 'phone'}
            onClick={() => setActiveDevice('phone')}
          />
        </Arrange>
      );
    }
  

    <Arrange>
      <IconButton variant="neutral" icon={<IconFolder />}/>
      <IconButton variant="danger" icon={<IconTrash />}/>
    </Arrange>
  

    <Arrange>
      <IconButton icon={<IconArrowLeft />} isDisabled/>
      <IconButton icon={<IconArrowRight />}/>
    </Arrange>
  

    <IconButton icon={<IconPlus />} onClick={() => alert('Nice')}/>
  

    <Arrange gap="s">
      <IconButton icon={<IconPlus />} onClick={() => console.log('clicked')}/>
      <IconButton icon={<IconPlus />} tag="a" href="https://flodesk.com" target="_blank"/>
      <IconButton icon={<IconPlus />} tag="span"/>
    </Arrange>