---
title: "在你的编辑器中集成按钮"
description: "使用按钮 UI 组件在你的 Tiptap 编辑器中集成按钮。更多内容请查看文档。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/button"
---

# 在你的编辑器中集成按钮

使用按钮 UI 组件在你的 Tiptap 编辑器中集成按钮。更多内容请查看文档。

一个可点击的元素，在激活时执行某个操作。

> **Interactive demo:** [button](https://template.tiptap.dev/preview/tiptap-ui-primitive/button)

## 安装

你可以通过 Tiptap CLI 添加该原始组件

```bash
npx @tiptap/cli@latest add button
```

## 用法

```tsx
import { Button } from '@/components/tiptap-ui-primitive/button'
import { BoldIcon } from '@/components/icons/bold-icon'

export default function MyComponent() {
  return (
    <Button
      data-style="ghost"
      data-active-state="on"
      tooltip="粗体"
      shortcutKeys="Ctrl+B"
      onClick={() => console.log('粗体被点击')}
    >
      <BoldIcon className="tiptap-button-icon" />
      <span className="tiptap-button-text">粗体</span>
    </Button>
  )
}
```

## 属性

### 按钮

| 名称                | 类型            | 默认值       | 描述                          |
| ----------------- | ------------- | --------- | --------------------------- |
| data-style        | string        | undefined | 按钮样式（例如：'ghost', 'primary'） |
| data-active-state | 'on' \| 'off' | undefined | 按钮活动状态                      |
| data-size         | string        | undefined | 按钮大小（例如：'small', 'default'） |
| data-appearance   | string        | undefined | 按钮外观                        |
| data-disabled     | boolean       | undefined | 视觉禁用状态                      |
| tooltip           | string        | undefined | 工具提示中显示的文本                  |
| shortcutKeys      | string        | undefined | 工具提示中显示的键盘快捷键               |