Close Button

Used to trigger close functionality

Usage

import { CloseButton } from "chakra-ui-solid";

<CloseButton />

Examples

Sizes

Use the size prop to change the size of the close button.

Variants

Use the variant prop to change the appearance of the close button.

Custom Icon

Pass the custom icon to the children of the CloseButton component.

Props

CloseButton takes everything Button takes, with two defaults of its own: variant is ghost rather than solid, and the aria-label is Close until you name what the control dismisses.

CloseButtonProps
Prop	Default	Type
`loading`	`false`	`boolean` Show a spinner and disable the control. The button keeps the width it had, because the {@link Loader} hides the children in place rather than removing them.
`loadingText`	—	`JSX.Element` Shown in place of the children while loading, with the spinner beside it.
`size`	`'md'`	`ConditionalValue<'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| PresetVariant<'button', 'size'>>` The control's height, padding, gap and type scale together.
`spinner`	—	`JSX.Element` What to spin. Defaults to a Spinner sized and coloured off the button's own label.
`spinnerPlacement`	`'start'`	`'start' \| 'end'` Which side of `loadingText` the spinner sits on. Only read when `loadingText` is passed.
`variant`	`'ghost'`	`ConditionalValue<\| 'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain' \| PresetVariant<'button', 'variant'>>` How much of the colour palette the button spends — `ghost` carries no background until it is hovered, which is what a control sitting in the corner of a dialog wants.

Plus HTMLChakraProps<"button"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.