CloseButton 关闭按钮
用于关闭对话框、模态框或 dismiss 内容的按钮组件
用法
import { CloseButton } from "@lenso/ui";此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";export function Default() { return <CloseButton />;}Local adaptation source above. Derived from HeroUI v3.2.6 source.
示例
交互
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";import { useState } from "react";import * as stylex from "@stylexjs/stylex";import { styles } from "./source.stylex";export function Interactive() { const [count, setCount] = useState(0); return ( <div {...stylex.props(styles.interactive)}> <CloseButton aria-label={`Close (clicked ${count} times)`} onClick={() => setCount(count + 1)} /> <span {...stylex.props(styles.count)}>Clicked: {count} times</span> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义图标
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CircleXmark, Xmark } from "@gravity-ui/icons";import { CloseButton } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { styles } from "./source.stylex";export function WithCustomIcon() { return ( <div {...stylex.props(styles.row)}> <div {...stylex.props(styles.column)}> <CloseButton> <CircleXmark /> </CloseButton> <span {...stylex.props(styles.caption)}>Custom Icon</span> </div> <div {...stylex.props(styles.column)}> <CloseButton> <Xmark /> </CloseButton> <span {...stylex.props(styles.caption)}>Alternative Icon</span> </div> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义样式
Tailwind CSS
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.import { CloseButton } from "@lenso/ui";import { styles } from "./source.stylex";export function CustomStyles() { return <CloseButton aria-label="Close" xstyle={styles.custom} />;}Local adaptation source above. Derived from HeroUI v3.2.6 source.
全局 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 类（查看源码样式）：
基础类 [!toc]
.close-button- 基础组件样式
变体类 [!toc]
.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
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
variant | "default" | "default" | 按钮视觉变体 |
children | ReactNode | function | <CloseIcon /> | 显示内容（默认为关闭图标） |
onPress | () => void | - | 按下时的回调 |
isDisabled | boolean | false | 是否禁用 |
React Aria Button Props
CloseButton 继承所有 React Aria Button 属性。常用属性包括：
| Prop | 类型 | 描述 |
|---|---|---|
aria-label | string | 屏幕阅读器的无障碍标签 |
aria-labelledby | string | 标注按钮的元素 ID |
aria-describedby | string | 描述按钮的元素 ID |
Render Props
使用 render prop 模式时，提供以下值：
| Prop | 类型 | 描述 |
|---|---|---|
isHovered | boolean | 是否悬停 |
isPressed | boolean | 是否按下 |
isFocused | boolean | 是否聚焦 |
isDisabled | boolean | 是否禁用 |