CloseButton 关闭按钮

引入

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

用法

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

export function Default() {
  return <CloseButton />;
}

自定义图标

import {CircleXmark, Xmark} from "@gravity-ui/icons";
import {CloseButton} from "@heroui/react";

export function WithCustomIcon() {
  return (

交互

"use client";

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

样式

传入 Tailwind CSS 类

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

function CustomCloseButton() {
  return <CloseButton className="text-red-600 hover:bg-red-100">Close</CloseButton>;
}

自定义组件类

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

@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 或 [data-hovered="true"]
• 激活/按压：:active 或 [data-pressed="true"]
• 聚焦：:focus-visible 或 [data-focus-visible="true"]
• 禁用：:disabled 或 [aria-disabled="true"]

API 参考

CloseButton Props

React Aria Button Props

CloseButton 继承所有 React Aria Button props。常见 props 包括：

RenderProps

使用渲染 prop 模式时，会提供以下值：