ActionIconpolymorphic

Icon button
Import

Usage

Color
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { ActionIcon } from '@mantine/core';
import { IconAdjustments } from '@tabler/icons';
function Demo() {
return (
<ActionIcon>
<IconAdjustments size={18} />
</ActionIcon>
);
}

Variants

import { ActionIcon } from '@mantine/core';
import { IconSettings } from '@tabler/icons';
function Demo() {
return (
<>
<ActionIcon variant="transparent"><IconSettings size={16} /></ActionIcon>
<ActionIcon variant="subtle"><IconSettings size={16} /></ActionIcon>
<ActionIcon variant="default"><IconSettings size={16} /></ActionIcon>
<ActionIcon variant="outline"><IconSettings size={16} /></ActionIcon>
<ActionIcon variant="filled"><IconSettings size={16} /></ActionIcon>
<ActionIcon variant="light"><IconSettings size={16} /></ActionIcon>
</>
);
}

Colors

ActionIcon color prop accepts only keys of theme.colors (including colors index reference, i. e. blue.3). Hex, rgba, hsl and other CSS colors are not supported:

data- attributes

ActionIcon has the following attributes on the root element:

  • data-disabled when disabled prop is true
  • data-loading when loading prop is true

You can customize disabled and loading styles with these attributes:

import { ActionIcon } from '@mantine/core';
function Demo() {
return (
<ActionIcon
sx={{
'&[data-disabled]': { opacity: 0.4 },
'&[data-loading]': { backgroundColor: 'red' },
}}
/>
);
}

Polymorphic component

ActionIcon is a polymorphic component, you can change root element:

import { ActionIcon } from '@mantine/core';
function Demo() {
return (
<ActionIcon component="a" href="https://mantine.dev/core/">
Anchor element
</ActionIcon>
);
}

Get element ref

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

Accessibility

ActionIcon does not have an associated label, set title or aria-label props to make it visible for screen readers:

<ActionIcon /> // -> not visible to screen reader
<ActionIcon title="Settings" /> // -> ok
<ActionIcon aria-label="Settings" /> // -> ok
Download more icon variants from https://tabler-icons.io/i/search

ActionIcon component props

NameTypeDescription
children
ReactNode
Icon
color
MantineColor
Key of theme.colors
disabled
boolean
Indicates disabled state
gradient
MantineGradient
Controls gradient settings in gradient variant only
loaderProps
LoaderProps
Props spread to Loader component
loading
boolean
Indicates loading state
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Button border-radius from theme or number to set border-radius in px
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined icon size or number to set width and height in px
variant
"outline" | "transparent" | "light" | "default" | "filled" | "subtle" | "gradient"
Controls appearance