v4.2.12

ActionIcon

Icon button to indicate secondary action
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 { Adjustments } from 'tabler-icons-react';


function Demo() {
  return (
    <ActionIcon>
      <Adjustments />
    </ActionIcon>
  );
}

Children

ActionIcon accepts any React node as child. It does not control icon size, specify it manually on icon component to match ActionIcon size. For example, in tabler icons you can use size prop:

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


function Demo() {
  return (
    <ActionIcon>
      <Adjustments size={16} />
    </ActionIcon>
  );
}

Variants

ActionIcon has 6 variants: transparent, hover, default, outline, filled and light:

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


function Demo() {
  return (
    <>
      <ActionIcon variant="transparent"><Settings size={16} /></ActionIcon>
      <ActionIcon variant="hover"><Settings size={16} /></ActionIcon>
      <ActionIcon variant="default"><Settings size={16} /></ActionIcon>
      <ActionIcon variant="outline"><Settings size={16} /></ActionIcon>
      <ActionIcon variant="filled"><Settings size={16} /></ActionIcon>
      <ActionIcon variant="light"><Settings size={16} /></ActionIcon>
    </>
  );
}

Color

ActionIcon supports all colors from 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, 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' }

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 { 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>
  );
}

Usage with react-router and other libraries

To use ActionIcon component with react-router-dom or other similar libraries pass 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>
  );
}

To use custom component with TypeScript, provide type (should match component prop):

import { ActionIcon } from '@mantine/core';
import { Link } from 'react-router-dom';


function Demo() {
  return (
    <>
      <ActionIcon<'a'> component="a" href="#" />
      <ActionIcon<typeof Link> component={Link} to="/hello" />
    </>
  );
}

Get element ref

import { useRef } from 'react';
import { ActionIcon } from '@mantine/core';


function Demo() {
  const ref = useRef<HTMLButtonElement>();
  return <ActionIcon ref={ref} />;
}

To use ref with custom component in TypeScript, specify generic type:

import { useRef } from 'react';
import { ActionIcon } from '@mantine/core';


function Demo() {
  const ref = useRef<HTMLAnchorElement>();
  return <ActionIcon<'a'> component="a" href="#" ref={ref} />;
}

Accessibility

ActionIcon renders a regular button element. Set title or aria-label props for screen reader support:

<ActionIcon /> // -> not visible to screen reader
<ActionIcon title="Settings" /> // -> ok
<ActionIcon aria-label="Settings" /> // -> ok
Go back
Stack – @mantine/core
Up next
Autocomplete – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
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