Action Icon

ActionIcon should be used around an Icon when you require a user interaction.

Appearance

<div className="flex gap-3">
  <ActionIcon label="Attach a file" appearance="simple">
    <Icon is={Clip} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="outline">
    <Icon is={Clip} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="solid">
    <Icon is={Clip} />
  </ActionIcon>
</div>

Themes

Change the icon's colour and background, depending on the appearance variant.

<div className="flex flex-col gap-3">
  <div className="flex gap-3">
    <ActionIcon theme="success" label="Success" appearance="simple">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="success" label="Success" appearance="outline">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="success" label="Success" appearance="solid">
      <Icon is={Clip} />
    </ActionIcon>
  </div>

  <div className="flex gap-3">
    <ActionIcon theme="danger" label="Danger" appearance="simple">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="danger" label="Danger" appearance="outline">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="danger" label="Danger" appearance="solid">
      <Icon is={Clip} />
    </ActionIcon>
  </div>

  <div className="flex gap-3">
    <ActionIcon theme="neutral" label="Neutral" appearance="simple">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="neutral" label="Neutral" appearance="outline">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="neutral" label="Neutral" appearance="solid">
      <Icon is={Clip} />
    </ActionIcon>
  </div>

  <div className="flex gap-3">
    <ActionIcon theme="primary" label="Primary" appearance="simple">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="primary" label="Primary" appearance="outline">
      <Icon is={Clip} />
    </ActionIcon>
    <ActionIcon theme="primary" label="Primary" appearance="solid">
      <Icon is={Clip} />
    </ActionIcon>
  </div>
</div>

Sizes

<div className="flex gap-3">
  <ActionIcon label="Attach a file" appearance="outline" isRounded>
    <Icon is={Bell} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="solid" isRounded>
    <Icon is={Bell} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="solid" isRounded size="md">
    <Icon is={Bell} />
  </ActionIcon>
  
  <ActionIcon label="Attach a file" appearance="solid" isRounded size="lg">
    <Icon is={Bell} />
  </ActionIcon>
</div>

Rounded Variant

Setting isRounded makes the Action circular when paired with the options "outline" and "solid" for the appearance prop

<div className="flex gap-3">
  <ActionIcon label="Attach a file" appearance="outline" isRounded>
    <Icon is={Bell} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="solid" isRounded>
    <Icon is={Bell} />
  </ActionIcon>
</div>

Disabled state

Passing disabled makes the Action Icon take a disabled appearance, where any cursor interaction with the component will not render any changes in its UI.

<div className="flex gap-3">
  <ActionIcon label="Attach a file" appearance="simple" disabled>
    <Icon is={Bell} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="outline" disabled>
    <Icon is={Bell} />
  </ActionIcon>
  <ActionIcon label="Attach a file" appearance="solid" disabled>
    <Icon is={Bell} />
  </ActionIcon>
</div>

Polymorphism

The ActionIcon component supports polymorphism, therefore depending on whether it receives an onClick/href as a prop, it will produce a button or link respectively

<div className="flex gap-3">
  <ActionIcon label="Shuffle selection" onClick={() => console.log('clicked')}>
    <Icon is={Shuffle} />
  </ActionIcon>


  <ActionIcon label="Add a new folder" href="/directory/add">
    <Icon is={FolderAdd} />
  </ActionIcon>
</div>

Tooltip

The ActionIcon shows a tooltip by default. If the tooltip needs to be turned off it can by passing hasTooltip=false. It is not advisable to turn off the tooltip option as it may reduce the user experience.

The direction of the tooltip can be controlled, if needed, by using tooltipSide.

<div className="flex gap-3">
  <ActionIcon label="Tooltip on the right" tooltipSide="right" appearance="solid" size="lg">
    <Icon is={Shuffle}  />
  </ActionIcon>
</div>