Icon button to indicate secondary action


<GearIcon />


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:

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

Where to use

Password input visibility toggle example:


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>


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 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' }
Predefined sizes from xs to xl:
Theme radius from xs to xl:

You can get default sizes values by importing ACTION_ICON_SIZES:

import { ACTION_ICON_SIZES } from '@mantine/core';
Prop valueWidth and height

Usage with react-router and other libraries

You can use ActionIcon component with react-router-dom or other similar libraries by passing 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

Usage with Next Link

Next Link component requires ref prop usage, however all Mantine components use elementRef, to make ActionIcon and other similar components work with Next Link, create wrapper component in your components folder:

// This component can be reused in every Mantine component which supports component pass through
import React, { forwardRef } from 'react';
import Link from 'next/link';
export const NextLink = forwardRef(
{ href, ...others }: React.ComponentPropsWithoutRef<typeof Link>,
ref: React.ForwardedRef<HTMLAnchorElement>
) => (
<Link href={href}>
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
<a {...others} ref={ref} />

And then pass it to Button or other component:

<ActionIcon component={NextLink} href="/hello">
<MyIcon />

Get element ref

You can get button ref with elementRef prop:

import { useRef } from 'react';
import { ActionIcon } from '@mantine/core';
function Demo() {
const ref = useRef();
return <ActionIcon elementRef={ref} />;

To use elementRef with custom component in TypeScript you will need to specify generic types:

// Simple variant with function ref – specify type on node itself:
<ActionIcon component="a" elementRef={(node: HTMLAnchorElement) => {}} />;
// Variant with ref object – provide generic arguments:
const myRef = useRef<HTMLAnchorElement>();
<ActionIcon<'a', HTMLAnchorElement> component="a" elementRef={myRef} />;

Close button

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 React from 'react';
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} />


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 />
// Set aria-label to announce control with screen reader
<ActionIcon aria-label="Settings">
<GearIcon />
Build fully functional accessible web applications with ease
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