在你的编辑器中集成按钮

Available for free

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

安装

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

npx @tiptap/cli@latest add button

用法

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

Previously徽章

Next up卡片