CloseButton
CloseButtonは、基本的にコンポーネントの閉じる機能をトリガーするために使用するコンポーネントです。
<CloseButton />
使い方
import { CloseButton } from "@yamada-ui/react"
import { CloseButton } from "@/components/ui"
import { CloseButton } from "@workspaces/ui"
<CloseButton />
バリアントを変更する
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => <CloseButton variant={variant} key={index} />}
</For>
</Wrap>
サイズを変更する
<Wrap gap="md" alignItems="center">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size, index) => <CloseButton size={size} key={index} />}
</For>
</Wrap>
カラースキームを変更する
<Wrap gap="md">
<For each={["success", "warning"]}>
{(colorScheme, index) => (
<CloseButton colorScheme={colorScheme} key={index} />
)}
</For>
</Wrap>
形を変える
角丸にする場合は、fullRoundedをtrueにします。
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => (
<CloseButton variant={variant} key={index} fullRounded />
)}
</For>
</Wrap>
無効にする
無効にする場合は、disabledをtrueにします。
<Wrap gap="md">
<For each={["solid", "subtle", "surface", "outline", "ghost"]}>
{(variant, index) => <CloseButton variant={variant} key={index} disabled />}
</For>
</Wrap>
Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。