在你的编辑器中集成按钮

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

安装

你可以通过 Tiptap CLI 安装该基础组件（适用于 Vite 或 Next.js）

npx @tiptap/cli add button

手动集成

对于其他框架（如 Vite 或 Next.js 以外的框架），请根据开源代码库手动添加该基础组件。

导入样式

该组件需要你导入我们的样式，这些样式已经添加到 styles/keyframe-animation.scss 和 styles/_variables.scss 中。

用法

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	工具提示中显示的键盘快捷键