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

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"ghost" \| "outline" \| "solid" \| "subtle" \| "surface" ...` The variant of the component.
`active`	`false`	`boolean` If `true`, the button is represented as active.
`disabled`	`false`	`boolean` If `true`, the button is disabled.
`disableRipple`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.
`icon`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>` The icon to be used in the button.
`loading`	`false`	`boolean` If `true`, the loading state of the button is represented.
`type`	`"button"`	`"button" \| "reset" \| "submit"` The type of button. Accepts `button`, `reset`, or `submit`.

アクセシビリティ

CloseButtonは、アクセシビリティに関してWAI-ARIA - Button Patternに従います。

キー	説明	状態
`Space`, `Enter`	フォーカスしているボタンをアクティブにします。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`CloseButton`	`aria-label`	`"閉じる"`を設定します。

類似のコンポーネント

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

IconButtonは、ボタン内にアイコンを表示するコンポーネントです。

Toggleは、オンまたはオフの２つの状態を持つコンポーネントです。

FileButtonは、ユーザーがファイルを選択するために使用されるボタンのコンポーネントです。

使用しているコンポーネント・フック

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

使用されているコンポーネント・フック

Drawerは、画面の端から表示されるパネルのコンポーネントです。

Modalは、主要なコンテンツに重ねて表示され、ユーザーの注意を情報のみに集中させるコンポーネントです。

Snacksは、フォームなどで使用される通知を制御するコンポーネントです。