关闭按钮

import { CloseButton } from "@chakra-ui/react"

const Demo = () => {
  return <CloseButton />
}

import { CloseButton, For, HStack } from "@chakra-ui/react"

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

import { CloseButton, HStack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <CloseButton variant="ghost" />
      <CloseButton variant="outline" />
      <CloseButton variant="subtle" />
      <CloseButton variant="solid" />
    </HStack>
  )
}

import { CloseButton } from "@chakra-ui/react"
import { HiX } from "react-icons/hi"

const Demo = () => {
  return (
    <CloseButton variant="ghost" aria-label="Close">
      <HiX />
    </CloseButton>
  )
}