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`	-	`"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`.

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"`.

Similar Components

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

IconButton is a component that displays an icon within a button.

FileButton is a button component used for users to select files.

Toggle is a component that has two states: on or off.

Uses Components & Hooks

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Icon is a general icon component that can be used in your projects.

Used By Components & Hooks

Drawer is a component for a panel that appears from the edge of the screen.

Modal is a component that is displayed over the main content to focus the user's attention solely on the information.

Snacks is a component for controlling notifications used in forms and other similar situations.