---
url: /documentation/user-interface/components/undoredobuttons.md
---

# UndoRedoButtons

The `UndoRedoButtons` component provides undo and redo functionality with tooltips. The buttons are automatically disabled when undo/redo actions are not available, providing a consistent user experience across applications.

::: info Keyboard Shortcuts
The tooltips mention keyboard shortcuts (Ctrl+Z for undo and Ctrl+Y for redo), but these shortcuts are not implemented by the component itself. Applications using this component need to implement their own keyboard event handlers to support these shortcuts.
:::

## Localization

The tooltip text can be customized using the following localization keys:

| Key | Default Value | Description |
|-----|---------------|-------------|
| `common-ui.undo_tooltip` | "Undo (Ctrl+Z)" | Tooltip text for the undo button |
| `common-ui.redo_tooltip` | "Redo (Ctrl+Y)" | Tooltip text for the redo button |

Override these keys in your application's localization configuration to customize the tooltip text.

## Preview

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `canUndo` | `boolean` | Yes | - | Whether undo action is available |
| `canRedo` | `boolean` | Yes | - | Whether redo action is available |

## Events

| Event | Payload | Description |
|-------|---------|-------------|
| `@undo` | None | Emitted when the undo button is clicked |
| `@redo` | None | Emitted when the redo button is clicked |

## Usage

### Basic Implementation

Simple undo/redo buttons:

```vue
<script setup lang="ts">
import { ref } from 'vue';

const canUndo = ref(false);
const canRedo = ref(false);

function handleUndo() {
  console.log('Undo action');
}

function handleRedo() {
  console.log('Redo action');
}
</script>

<template>
  <UndoRedoButtons 
    :can-undo="canUndo" 
    :can-redo="canRedo"
    @undo="handleUndo"
    @redo="handleRedo"
  />
</template>
```