ActionIcon

Icon button to indicate secondary action

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Color

Size

Radius

Variant

Disabled

<ActionIcon>
  <GearIcon />
</ActionIcon>

Children

ActionIcon accepts any React node as child. It does not control icon size, specify it manually on icon component to match ActionIcon size:

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

Variants

ActionIcon has 6 variants: hover, default, transparent, filled, light and outline:

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

Color

ActionIcon supports all colors from 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, use a 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' }

CloseButton is a premade ActionIcon with close icon, it is used in all other components: Popover, Modal, Notification, etc. Component accepts the same props as ActionIcon with additional iconSize prop to control icon width and height:

import { CloseButton, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <CloseButton aria-label="Close modal" />
      <CloseButton title="Close popover" size="xl" iconSize={20} />
    </Group>
  );
}

Usage with react-router and other libraries

To use ActionIcon component with react-router-dom or other similar libraries pass Link as component to ActionIcon:

import { Link } from 'react-router-dom';
import { ActionIcon } from '@mantine/core';

function Demo() {
  return (
    <ActionIcon component={Link} to="/react-router">
      React router link
    </ActionIcon>
  );
}

To use custom component with TypeScript, provide type (should match component prop):

// With element
<ActionIcon<'a'>
  component="a"
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>

// With component
<ActionIcon<typeof Link>
  component={Link}
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>

Get element ref

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

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

To use ref with custom component in TypeScript, specify generic type:

<ActionIcon<'a'> component="a" ref={(node) => {}} />

Accessibility

ActionIcon renders a regular button element. Set title or aria-label props for screen reader support:

<ActionIcon /> // -> not visible to screen reader
<ActionIcon title="Settings" /> // -> ok
<ActionIcon aria-label="Settings" /> // -> ok

Go back

Space – @mantine/core

Up next

Autocomplete – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

Feedback

Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good

Leave feedback

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter