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-react';


function Demo() {
  return (
    <ActionIcon>
      <IconAdjustments size="1.125rem" />
    </ActionIcon>
  );
}

Variants

import { ActionIcon } from '@mantine/core';
import { IconSettings } from '@tabler/icons-react';


function Demo() {
  return (
    <>
      <ActionIcon variant="transparent"><IconSettings size="1rem" /></ActionIcon>
      <ActionIcon variant="subtle"><IconSettings size="1rem" /></ActionIcon>
      <ActionIcon variant="default"><IconSettings size="1rem" /></ActionIcon>
      <ActionIcon variant="outline"><IconSettings size="1rem" /></ActionIcon>
      <ActionIcon variant="filled"><IconSettings size="1rem" /></ActionIcon>
      <ActionIcon variant="light"><IconSettings size="1rem" /></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
Gradient input, only used when variant="gradient", theme.defaultGradient by default
loaderProps
LoaderProps
Props added to Loader component (only visible when `loading` prop is set)
loading
boolean
Indicates loading state
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Predefined button size or any valid CSS value to set width and height
variant
Variants<"outline" | "transparent" | "light" | "default" | "filled" | "gradient" | "subtle">
Controls appearance, subtle by default
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