Usage
Color
Shades
Size
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Variants
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
whendisabled
prop istrue
data-loading
whenloading
prop istrue
You can customize disabled
and loading
styles with these attributes:
Polymorphic component
ActionIcon is a polymorphic component, you can change root element:
Get element ref
Accessibility
ActionIcon does not have an associated label, set title
or aria-label
props to make it visible for screen readers:
ActionIcon component props
Name | Type | Description |
---|---|---|
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 |