Usage
CloseButton is a premade ActionIcon with close icon.
Component accepts the same props as ActionIcon
with additional iconSize
prop to control icon width and height:
Accessibility
CloseButton does not have an associated label, set title
or aria-label
props to make it visible for screen readers:
CloseButton component props
Name | Type | Description |
---|---|---|
color | MantineColor | Key of theme.colors |
disabled | boolean | Indicates disabled state |
gradient | MantineGradient | Gradient input, only used when variant="gradient", theme.defaultGradient by default |
iconSize | string | number | Width and height of X icon |
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 |