v6.0.35

ActionIconpolymorphic

Icon button
Import

Usage

Color
Shades
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
import { ActionIcon } from '@asuikit/core';
import { IconAdjustments } from '@tabler/icons-react';
function Demo() {
return (
<ActionIcon>
<IconAdjustments size="1.125rem" />
</ActionIcon>
);
}

Variants

import { ActionIcon } from '@asuikit/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 '@asuikit/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 '@asuikit/core';
function Demo() {
return (
<ActionIcon component="a" href="https://srcalienswap.github.io/as-uikit/core/">
Anchor element
</ActionIcon>
);
}

Get element ref

import { useRef } from 'react';
import { ActionIcon } from '@asuikit/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

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