---
title: "Undo Redo Button"
description: "Integrate a button that helps undo and redo editor actions for your Tiptap editor. More in the docs"
canonical_url: "https://tiptap.dev/docs/ui-components/components/undo-redo-button"
---

# Undo Redo Button

Integrate a button that helps undo and redo editor actions for your Tiptap editor. More in the docs

A fully accessible undo redo button for Tiptap editors. Easily undo or redo editor actions with keyboard shortcut support and flexible customization options.

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

## Installation

Add the component via the Tiptap CLI:

```bash
npx @tiptap/cli@latest add undo-redo-button
```

## Components

### `<UndoRedoButton />`

A prebuilt React component that performs undo or redo actions for a specific action type.

#### Usage

```tsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { UndoRedoButton } from '@/components/tiptap-ui/undo-redo-button'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
        <p>Try typing something and then click the undo and redo buttons.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <UndoRedoButton
        editor={editor}
        action="undo"
        text="Undo"
        hideWhenUnavailable={true}
        showShortcut={true}
        onExecuted={() => console.log('Action executed!')}
      />
      <UndoRedoButton
        editor={editor}
        action="redo"
        text="Redo"
        hideWhenUnavailable={true}
        showShortcut={true}
        onExecuted={() => console.log('Action executed!')}
      />

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                        |
| --------------------- | ---------------- | ----------- | -------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                         |
| `action`              | `UndoRedoAction` | `required`  | The action type (`"undo"` or `"redo"`)             |
| `text`                | `string`         | `undefined` | Optional text label for the button                 |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when action is not available      |
| `onExecuted`          | `() => void`     | `undefined` | Callback fired after a successful action execution |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)     |

## Hooks

### `useUndoRedo()`

A custom hook to build your own undo redo button with full control over rendering and behavior.

#### Usage

```tsx
function MyUndoRedoButton() {
  const { isVisible, canExecute, handleAction, label, shortcutKeys, Icon } = useUndoRedo({
    editor: myEditor,
    action: 'undo',
    hideWhenUnavailable: true,
    onExecuted: () => console.log('Action executed!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleAction} disabled={!canExecute} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                        |
| --------------------- | ---------------- | ----------- | -------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                         |
| `action`              | `UndoRedoAction` | `required`  | The action type to perform                         |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if action is not available        |
| `onExecuted`          | `() => void`     | `undefined` | Callback fired after a successful action execution |

#### Return Values

| Name           | Type            | Description                               |
| -------------- | --------------- | ----------------------------------------- |
| `isVisible`    | `boolean`       | Whether the button should be rendered     |
| `canExecute`   | `boolean`       | If the specific action can be executed    |
| `handleAction` | `() => boolean` | Function to execute the history action    |
| `label`        | `string`        | Accessible label text for the button      |
| `shortcutKeys` | `string`        | Keyboard shortcut for the specific action |
| `Icon`         | `React.FC`      | Icon component for the undo redo button   |

## Utilities

### `canExecuteUndoRedoAction(editor, action)`

Checks if a specific history action can be executed in the current editor state.

```tsx
import { canExecuteUndoRedoAction } from '@/components/tiptap-ui/undo-redo-button'

const canUndo = canExecuteUndoRedoAction(editor, 'undo') // Check if undo is available
const canRedo = canExecuteUndoRedoAction(editor, 'redo') // Check if redo is available
```

### `executeUndoRedoAction(editor, action)`

Programmatically executes a history action for the specified type.

```tsx
import { executeUndoRedoAction } from '@/components/tiptap-ui/undo-redo-button'

const success = executeUndoRedoAction(editor, 'undo')
if (success) {
  console.log('Undo executed successfully!')
}

const success2 = executeUndoRedoAction(editor, 'redo')
if (success2) {
  console.log('Redo executed successfully!')
}
```

## Keyboard Shortcuts

Each action type has its own keyboard shortcut:

- **Cmd/Ctrl + Z**: Undo last action
- **Cmd/Ctrl + Shift + Z**: Redo last undone action

The shortcuts are automatically registered when using either the `<UndoRedoButton />` component or the `useUndoRedo()` hook.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `@tiptap/extension-history` - History extension for undo/redo
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `undo-icon` (icon)
- `redo-icon` (icon)