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

Prop	Default	Type / Description
`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`	`"xs"`	`"2xl" \| "2xs" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"ghost"`	`"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.
`fullRounded`	`false`	`boolean` If `true`, the button is full rounded. Else, it'll be slightly round.
`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`.

Accessibility

CloseButton follows the WAI-ARIA - Button Pattern for accessibility.

Key	Description	State
`Space`, `Enter`	When element has focus, activates it.	-

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`CloseButton`	`aria-label`	Sets to `"Close"`.