Integrate a button in your Editor

A clickable element that performs an action when activated.

Install

You can add the primitive via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add button

Manual Integration

For frameworks other than Vite or Next.js, add the primitive manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

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="Bold"
      shortcutKeys="Ctrl+B"
      onClick={() => console.log('Bold clicked')}
    >
      <BoldIcon className="tiptap-button-icon" />
      <span className="tiptap-button-text">Bold</span>
    </Button>
  )
}

Props

Button

Name	Type	Default	Description
data-style	string	undefined	Button style (e.g., 'ghost', 'primary')
data-active-state	'on' \| 'off'	undefined	Button active state
data-size	string	undefined	Button size (e.g., 'small', 'default')
data-appearance	string	undefined	Button appearance
data-disabled	boolean	undefined	Visual disabled state
tooltip	string	undefined	Text displayed in tooltip
shortcutKeys	string	undefined	Keyboard shortcut displayed in tooltip