CloseButton

基础浮层

基于 Bootstrap 5 的关闭按钮组件，用于弹窗、警告框、Toast 等场景的关闭操作，支持白色变体与禁用状态

Component Demo

Basic usage and examples of the CloseButton component

基础用法

屏幕阅读器将朗读 aria-label 中的文本

深色背景变体

深色背景上使用白色变体

禁用状态

禁用状态不响应点击

自定义样式

交互演示

注意！ 这是一条可以关闭的警告消息。

API Documentation

Complete API reference for the CloseButton component

Props

属性名	类型	默认值	描述
`variant`	`CloseButtonVariant`	-	按钮变体，可选 `white`，用于深色背景
`disabled`	`boolean`	`false`	是否禁用按钮
`aria-label`	`string`	`'Close'`	无障碍标签，向屏幕阅读器描述按钮用途
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	原生 button 的 type，默认为 button 以避免意外提交表单
`className`	`string`	-	自定义类名
`...rest`	`ButtonHTMLAttributes`	-	原生 button 元素的所有属性（如 `onClick`、`onFocus` 等）

Type Definitions

CloseButtonVariant

关闭按钮变体类型

type CloseButtonVariant = 'white';

CloseButtonProps

关闭按钮组件属性接口

export interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: CloseButtonVariant;
  disabled?: boolean;
  className?: string;
}