import { CloseButton } from "@/components/ui/close-button"
const Demo = () => {
return <CloseButton />
}
Setup
If you don't already have the snippet, run the following command to add the
close-button snippet
npx @chakra-ui/cli snippet add close-buttonThe snippet includes a CloseButton component composition based on the
IconButton component.
Usage
import { CloseButton } from "@/components/ui/close-button"<CloseButton />Examples
Sizes
Use the size prop to change the size of the close button.
import { For, HStack } from "@chakra-ui/react"
import { CloseButton } from "@/components/ui/close-button"
const Demo = () => {
return (
<HStack gap="4" wrap="wrap">
<For each={["2xs", "xs", "sm", "md", "lg", "xl"]}>
{(size) => <CloseButton variant="outline" size={size} />}
</For>
</HStack>
)
}
Variants
Use the variant prop to change the appearance of the close button.
import { HStack } from "@chakra-ui/react"
import { CloseButton } from "@/components/ui/close-button"
const Demo = () => {
return (
<HStack>
<CloseButton variant="ghost" />
<CloseButton variant="outline" />
<CloseButton variant="subtle" />
<CloseButton variant="solid" />
</HStack>
)
}
Without Snippet
If you don't want to use the snippet, you can use the IconButton component
from the @chakra-ui/react package.
import { IconButton } from "@chakra-ui/react"
import { LuX } from "react-icons/lu"
const Demo = () => {
return (
<IconButton variant="ghost" aria-label="Close">
<LuX />
</IconButton>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg'The size of the component |
variant | 'solid' | 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain'The variant of the component |
loading | boolean | |
loadingText | React.ReactNode |