---
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/tiptap-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                                          |
| ----------------- | ------------------------------- | --------- | ---------------------------------------------------- |
| variant           | 'ghost' \| 'primary' \| 'check' | undefined | Visual style, or the `check` feature variant         |
| size              | 'small' \| 'default' \| 'large' | undefined | Button size                                          |
| tooltip           | ReactNode                       | undefined | Content displayed in the tooltip                     |
| shortcutKeys      | string                          | undefined | Keyboard shortcut displayed in tooltip               |
| showTooltip       | boolean                         | true      | Renders the tooltip wrapper when `tooltip` is set    |
| data-style        | string                          | undefined | Button style, set from `variant` when it is provided |
| data-active-state | 'on' \| 'off'                   | undefined | Button active state                                  |
| data-size         | string                          | undefined | Button size, set from `size` when it is provided     |
| data-appearance   | string                          | undefined | Button appearance                                    |
| data-disabled     | boolean                         | undefined | Visual disabled state                                |

The button forwards every other `ButtonHTMLAttributes<HTMLButtonElement>` to the underlying element.

### Check variant

`variant="check"` renders a checkbox-style toggle: a full-width row with the label on the left and a check indicator on the right. It defaults to the ghost style at small size, provides `role="checkbox"`, and renders its own indicator, so you supply only the label and the state.

Drive it with `aria-checked`, which defaults to `false` and also accepts `"mixed"`:

```tsx
import { useState } from 'react'
import { Button } from '@/components/tiptap-ui-primitive/button'
import { CaseSensitiveIcon } from '@/components/tiptap-icons/case-sensitive-icon'

export default function MatchCaseOption() {
  const [matchCase, setMatchCase] = useState(false)

  return (
    <Button
      variant="check"
      aria-checked={matchCase}
      onClick={() => setMatchCase((current) => !current)}
    >
      <CaseSensitiveIcon className="tiptap-button-icon" />
      <span className="tiptap-button-text">Match case</span>
    </Button>
  )
}
```

The variant sets `data-variant="check"` on the element and renders the indicator as `.tiptap-button-check`, so both are available for styling. Its colors come from the `--tt-button-check-*` custom properties in `button-colors.scss`, and it installs the `check-icon` component.