Button

基础表单

基于 Bootstrap 5 的通用按钮组件，支持多种变体、尺寸与状态，可渲染为 button、a、input 等元素，并提供切换与加载能力

Component Demo

Basic usage and examples of the Button component

基础类

仅使用基础 `btn` 类时不带任何变体样式，可在此基础上自定义，注意为 `:focus` 状态提供明确的样式

基础变体

轮廓变体

尺寸

按钮标签

a 链接 href 自动渲染为 a

`btn` 类同样适用于 `a` 与 `input` 元素；用于触发页内功能（而非跳转）的链接按钮应添加 `role="button"`

禁用状态

禁用链接无 href 的禁用链接

禁用链接会自动应用 `disabled` 类、`aria-disabled="true"` 与 `tabIndex=-1`，建议同时移除 `href`

块级按钮

`block` 为按钮添加 `w-100`，配合 `d-grid gap-2` 容器即可创建响应式的全宽按钮堆叠

切换状态

切换状态由 React 管理（无需引入 Bootstrap JS）：点击自动切换 `active` 类与 `aria-pressed`，受控场景使用 `active`

加载状态

交互演示

点击触发 3 秒加载状态

每次点击增加计数

active 受控的切换按钮

自定义样式

组合使用

API Documentation

Complete API reference for the Button component

Props

属性名	类型	默认值	描述
`as`	`ElementType`	`'button'`	渲染的根元素，可传入 `a`、`input` 或任意组件
`variant`	`ButtonVariant`	-	按钮视觉变体，对应 Bootstrap 的 `btn-*` 类；不提供时仅应用基础 `btn` 类
`size`	`ButtonSize`	-	按钮大小，可选 `sm` 或 `lg`
`active`	`boolean`	-	激活状态：应用 `active` 类；与 `toggle` 配合时作为受控的按压状态
`defaultActive`	`boolean`	`false`	`toggle` 按钮在非受控模式下的初始按压状态
`toggle`	`boolean`	`false`	切换按钮：管理 `aria-pressed` 与 `active` 类，未提供 `active` 时点击自动切换
`block`	`boolean`	`false`	是否占据父容器全部宽度（`w-100`），建议配合 `d-grid` 容器使用
`disabled`	`boolean`	`false`	是否禁用按钮；渲染为 `a` 时会应用 `disabled` 类、`aria-disabled` 与 `tabIndex=-1`
`loading`	`boolean`	`false`	是否显示加载状态
`loadingText`	`string`	-	加载状态显示的文本，若未提供则显示 `children`
`type`	`string`	`'button'`	原生 `type` 属性，仅对 `button` 与 `input` 元素生效
`href`	`string`	-	链接地址，提供后自动渲染为 `a` 元素；可配合 `download`、`rel`、`target` 使用
`download`	`string`	-	提示浏览器下载链接资源而非导航，值为建议的文件名
`rel`	`string`	-	链接与目标资源的关系，例如 `noopener`、`nofollow`
`target`	`string`	-	链接打开的目标窗口，例如 `_blank`、`_self`
`children`	`ReactNode`	-	按钮子元素（`as="input"` 时忽略，请改用 `value`）
`className`	`string`	-	自定义类名
`...rest`	`ButtonHTMLAttributes`	-	原生 button 元素的所有属性（如 `onClick`、`onFocus` 等）

Type Definitions

ButtonVariant

按钮变体类型

type ButtonVariant =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'
  | 'link'
  | 'outline-primary'
  | 'outline-secondary'
  | 'outline-success'
  | 'outline-danger'
  | 'outline-warning'
  | 'outline-info'
  | 'outline-light'
  | 'outline-dark';

ButtonSize

按钮尺寸类型

type ButtonSize = 'sm' | 'lg';

ButtonProps

按钮组件属性接口

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  active?: boolean;
  as?: ElementType;
  block?: boolean;
  children?: ReactNode;
  className?: string;
  defaultActive?: boolean;
  disabled?: boolean;
  download?: string;
  href?: string;
  loading?: boolean;
  loadingText?: string;
  rel?: string;
  size?: ButtonSize;
  target?: string;
  toggle?: boolean;
  variant?: ButtonVariant;
}