v6.0.35

CloseButtonpolymorphic

ActionIcon with close icon
Import

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:

import { CloseButton, Group } from '@asuikit/core';
function Demo() {
return (
<Group position="center">
<CloseButton aria-label="Close modal" />
<CloseButton title="Close popover" size="xl" iconSize={20} />
</Group>
);
}

Accessibility

CloseButton does not have an associated label, set title or aria-label props to make it visible for screen readers:

<CloseButton /> // -> not visible to screen reader
<CloseButton title="Settings" /> // -> ok
<CloseButton aria-label="Settings" /> // -> ok

CloseButton component props

NameTypeDescription
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