CloseButton

A button with a close icon.

Import

tsx
import { CloseButton } from "@hope-ui/core";

tsx
import { CloseButton } from "@hope-ui/core";

Usage

tsx
<CloseButton />

tsx
<CloseButton />

Sizes

Use the size prop to change the size of the CloseButton.

tsx
<HStack spacing={4}>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</HStack>

tsx
<HStack spacing={4}>
  <CloseButton size="sm" />
  <CloseButton size="md" />
  <CloseButton size="lg" />
</HStack>

Custom icon

To use a custom icon, pass it as children of the CloseButton.

tsx
<CloseButton>
  <CrossCircledIcon />
</CloseButton>

tsx
<CloseButton>
  <CrossCircledIcon />
</CloseButton>

If you want to create your own icon components check out Hope UI Icon documentation.

Theming

Use the CloseButtonTheme type to override CloseButton styles and default props when extending Hope UI theme.

tsx
import { extendTheme, CloseButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    CloseButton: {
      // ...overrides
    } as CloseButtonTheme,
  },
});

tsx
import { extendTheme, CloseButtonTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    CloseButton: {
      // ...overrides
    } as CloseButtonTheme,
  },
});

Component parts

Props