---
title: "Integrate a button in your Editor"
description: "Integrate a button in your Tiptap Editor with the Button UI Component. More in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/button"
---

# Integrate a button in your Editor

Integrate a button in your Tiptap Editor with the Button UI Component. More in the docs.

A clickable element that performs an action when activated.

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

## Install

You can add the primitive via Tiptap CLI

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

## Usage

```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="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  |