ActionIcon

Usage

<ActionIcon>
  <GearIcon />
</ActionIcon>

Icons

You can use icons from any react icons library, for example, radix icons, feather icons or react-icons. Note that component does not control icon size and you need to specify it manually on icon component for better fit:

<ActionIcon>
  <YourIcon style={{ width: 16, height: 16 }} />
</ActionIcon>

Where to use

Password input visibility toggle example:

Variants

ActionIcon has 5 variants: hover (default), transparent, filled, light and outline:

<ActionIcon variant="transparent"><GearIcon /></ActionIcon>
<ActionIcon variant="hover"><GearIcon /></ActionIcon>
<ActionIcon variant="outline"><GearIcon /></ActionIcon>
<ActionIcon variant="filled"><GearIcon /></ActionIcon>
<ActionIcon variant="light"><GearIcon /></ActionIcon>

Color

You can choose any color defined in theme.colors:

<ActionIcon color="red" />
<ActionIcon color="blue" />

Size and radius

Control button width and height with size and border-radius with radius. Both props have predefined values: xs, sm, md, lg, xl. Alternatively you can use number to set radius or size in px:

<ActionIcon radius="lg" /> // -> theme predefined large radius
<ActionIcon radius={10} /> // -> { borderRadius: '10px' }

<ActionIcon size="sm" /> // -> predefined small size
<ActionIcon size={50} /> // -> { width: '50px', height: '50px' }

You can get default sizes values by importing ACTION_ICON_SIZES:

import { ACTION_ICON_SIZES } from '@mantine/core';

Get element ref

You can get button ref with elementRef prop:

import React, { useRef } from 'react';
import { ActionIcon } from '@mantine/core';

function Demo() {
  const ref = useRef();
  return <ActionIcon elementRef={ref} />;
}

Accessibility

ActionIcon renders a regular button element. Include title or aria-label props for screen reader support as by design element does not associated label.

// Set title to show message on hover
<ActionIcon title="Settings">
  <GearIcon />
</ActionIcon>

// Set aria-label to announce control with screen reader
<ActionIcon aria-label="Settings">
  <GearIcon />
</ActionIcon>