Close Button

Used to trigger close functionality

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

export default function CloseButtonBasic() {
  return <CloseButton />;
}

Usage

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

<CloseButton />

Examples

Sizes

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

import { CloseButton, HStack } from "chakra-ui-solid";
import { For } from "solid-js";

export default function CloseButtonWithSizes() {
  return (
    <HStack gap="4" wrap="wrap">
      <For each={["2xs", "xs", "sm", "md", "lg", "xl"] as const}>
        {(size) => <CloseButton variant="outline" size={size} />}
      </For>
    </HStack>
  );
}

Variants

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

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

export default function CloseButtonWithVariants() {
  return (
    <HStack>
      <CloseButton variant="ghost" />
      <CloseButton variant="outline" />
      <CloseButton variant="subtle" />
      <CloseButton variant="solid" />
    </HStack>
  );
}

Custom Icon

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

import { CloseButton } from "chakra-ui-solid";
import { XIcon } from "../components/site/icons";

export default function CloseButtonWithCustomIcon() {
  return (
    <CloseButton variant="ghost" aria-label="Close">
      <XIcon />
    </CloseButton>
  );
}

Props

CloseButton takes everything Button takes.

ButtonProps
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'>` 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`	`'solid'`	`ConditionalValue<'solid' \| 'subtle' \| 'surface' \| 'outline' \| 'ghost' \| 'plain'>` How much of the colour palette the button spends — `solid` is the filled one, `plain` carries no background or border at all.

Plus everything it inherits — 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.