Button

Button 是对 @base-ui/react/button 的封装，通过 class-variance-authority 提供丰富的样式变体。

引入

import { Button } from "aui-components";

基本用法

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button size="lg">Large</Button>

Props

属性	类型	默认值	说明
`focusableWhenDisabled`	`enum`	`false`	Whether the button should be focusable when disabled.
`nativeButton`	`enum`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
`className`	`enum`	—	CSS class applied to the element, or a function that returns a class based on the component's state.
`render`	`enum`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`enum`	—	Style applied to the element, or a function that returns a style object based on the component's state.
`variant`	`enum`	`default`	—
`size`	`enum`	`default`	—

变体

Variants

变体	说明	样式特征
`default`	默认	`bg-primary text-primary-foreground`
`outline`	轮廓	`border-border bg-background`
`secondary`	次要	`bg-secondary text-secondary-foreground`
`ghost`	幽灵	透明背景，hover 才显示
`destructive`	危险操作	`bg-destructive/10 text-destructive`
`link`	链接风格	`text-primary underline-offset-4`

<div className="flex gap-2">
  <Button variant="default">Default</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="link">Link</Button>
</div>

Sizes

尺寸	说明
`default`	`h-8 gap-1.5 px-2.5`
`xs`	`h-6 gap-1 px-2 text-xs`
`sm`	`h-7 gap-1 px-2.5 text-[0.8rem]`
`lg`	`h-9 gap-1.5 px-2.5`
`icon`	`size-8` — 方形图标按钮
`icon-xs`	`size-6` — 小方图标按钮
`icon-sm`	`size-7` — 中方图标按钮
`icon-lg`	`size-9` — 大方图标按钮

<div className="flex items-center gap-2">
  <Button size="xs">Extra Small</Button>
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
</div>

<div className="flex items-center gap-2">
  <Button size="icon-xs"><SearchIcon /></Button>
  <Button size="icon-sm"><SearchIcon /></Button>
  <Button size="icon"><SearchIcon /></Button>
  <Button size="icon-lg"><SearchIcon /></Button>
</div>

与 TooltipIconButton

TooltipIconButton 基于 Button 封装，添加了 Tooltip：

// 基础 Button
<Button variant="ghost" size="icon"><CopyIcon /></Button>

// 带 Tooltip 的 Button（推荐在聊天 UI 中使用）
<TooltipIconButton tooltip="Copy"><CopyIcon /></TooltipIconButton>

Button

引入

基本用法

Props

变体

Variants

Sizes

与 TooltipIconButton

相关链接

On this page