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 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' }
You can get default sizes values by importing ACTION_ICON_SIZES:
import { ACTION_ICON_SIZES } from '@mantine/core';
| Prop value | Width and height |
|---|---|
| xs | 18px |
| sm | 22px |
| md | 28px |
| lg | 34px |
| xl | 44px |
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</ActionIcon>);}
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 throughimport 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} /></Link>));
And then pass it to Button or other component:
<ActionIcon component={NextLink} href="/hello"><MyIcon /></ActionIcon>
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} /></Group>);}
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>