动作

Button

系统的动作，一颗不会在悬停时移动的胶囊。

什么时候用它

任何“会做点什么”的东西。如果它是跳转、而且长得像文字，那它是链接，不是幽灵按钮。

示例

variants

sizes

states

icon only

这套系统的动作。

渲染成 <button>；给了 href 就渲染成 <a>；用 asChild 时你给什么就渲染什么。这里不引入任何路由库，所以这个包对框架保持中立，Next 或 React Router 应用在调用处接上自己的 Link。

对服务端组件友好：这里没有客户端边界，所以它在静态页面里和在交互页面里一样能渲染。

Button props
属性	类型	默认值	说明
asChild	`boolean`	`false`	渲染子元素而不是 `<button>`，同时保留这套样式。用它把样式交给路由库的 `Link`——`asChild` 正是让这个包不依赖任何一个路由库的东西。装饰性插槽（`keycap`、`loading`）不会被注入到被替换的子元素里；那些请你自己在里面组合。
children	`ReactNode`		—
className	`string`		—
href	`string`		—
iconOnly	`boolean`	`false`	没有标签的方形控件。必须有 `aria-label`：一个没有可访问名称的纯图标按钮，在读屏软件眼里是不存在的，而这正是设计系统交付出不可用控件的头号方式。
keycap	`string`		可选的等宽键帽字符，渲染在标签之后（比如 "P"）。
loading	`boolean`	`false`	把前置内容换成 spinner 并阻断交互。标签留在原地——一个干活时把自己清空的按钮会丢掉宽度，页面就在刚点下去的那根手指底下重排了。
size	`ButtonSize`	`'md'`	高 36 / 44 / 48px。`md` 自己就满足指针目标的下限。
variant	`ButtonVariant`	`'primary'`	这是哪一类动作。`primary` 是这个屏幕最希望你做的那一件事，所以一屏最多一个；`danger` 留给破坏性动作，也是控件上唯一允许出现彩色的地方。

同时接受 AnchorHTMLAttributes<HTMLAnchorElement>, ButtonHTMLAttributes<HTMLButtonElement> 里的全部属性，它们会直接透传给底层元素，不再逐条列出。

export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
export type ButtonSize = 'sm' | 'md' | 'lg'

Button keyboard interactions
按键	作用
`Enter`	激活按钮。
`Space`	激活按钮。原生 <button> 两个键都认；套了样式的 <div> 一个都不认。