ActionIconpolymorphic

Icon button
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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
Go back
Stack – @mantine/core
Up next
Button – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter