CloseButton
CloseButton is a component used primarily to trigger the close functionality of a component.
<CloseButton />
Usage
import { CloseButton } from "@yamada-ui/react"
import { CloseButton } from "@/components/ui"
import { CloseButton } from "@workspaces/ui"
<CloseButton />
Change Variant
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => <CloseButton variant={variant} key={index} />}
</For>
</Wrap>
Change Size
<Wrap gap="md" alignItems="center">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => <CloseButton size={size} key={index} />}
</For>
</Wrap>
Change Color Scheme
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<CloseButton colorScheme={colorScheme} key={index} />
)}
</For>
</Wrap>
Change Shape
To rounded corners, set fullRounded to true.
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => (
<CloseButton variant={variant} key={index} fullRounded />
)}
</For>
</Wrap>
Disable
To disable, set disabled to true.
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => <CloseButton variant={variant} key={index} disabled />}
</For>
</Wrap>
Props
Accessibility
Currently, this section is being updated due to the migration of v2.