An accessible interactive wrapper around Icon

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

<>
<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>
</>

Rounded Variant

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

<>
<ActionIcon label="Attach a file" appearance="outline" isRounded>
<Icon is={Bell} />
</ActionIcon>
<ActionIcon label="Attach a file" appearance="solid" isRounded>
<Icon is={Bell} />
</ActionIcon>
</>

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.

<>
<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>
</>

It is recommended to pair ActionIcon with Tooltip to provide a clear visual description of the action the user is about to perform.

// `Tooltip.Provider` is included here to enable the example `Tooltip`, but you should generally place it at the root of your application
<Tooltip.Provider>
<Tooltip>
<Tooltip.Trigger asChild>
<ActionIcon size="lg" label="Add to basket">
<Icon is={Basket} size="md" />
</ActionIcon>
</Tooltip.Trigger>
<Tooltip.Content>Add to basket</Tooltip.Content>
</Tooltip>
</Tooltip.Provider>

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

<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>

API Reference

PropTypeDefaultRequired
size
"xs" | "sm" | "md" | "lg"
sm

-

appearance
"outline" | "simple" | "solid"
simple

-

labelstring

-

theme
"primary" | "success" | "danger" | "warning" | "neutral"
primary

-

isRounded
boolean

-

-

onClick
(...args: unknown[]) => void

-

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-

href
string

-

-