CloseButton 关闭按钮

用法

import { CloseButton } from "@heroui/react";

示例

交互

自定义图标

自定义样式

Tailwind CSS

全局 CSS

可使用 @layer components 指令自定义 CloseButton 组件类。 了解更多。

@layer components {
  .close-button {
    @apply bg-red-100 text-red-800 hover:bg-red-200;
  }

  .close-button--custom {
    @apply rounded-full border-2 border-red-300;
  }
}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

CloseButton 组件使用以下 CSS 类（查看源码样式）：

基础类

• .close-button - 基础组件样式

变体类

• .close-button--default - 默认变体

交互状态

组件同时支持 CSS 伪类与 data 属性：

• Hover：:hover 或 [data-hovered="true"]
• Active/Pressed：:active 或 [data-pressed="true"]
• Focus：:focus-visible 或 [data-focus-visible="true"]
• Disabled：:disabled 或 [aria-disabled="true"]

API 参考

CloseButton

React Aria Button Props

CloseButton 继承所有 React Aria Button 属性。常用属性包括：

Render Props

使用 render prop 模式时，提供以下值：

相关组件