---
title: "Text Button"
description: "Convert selected nodes to paragraphs in Tiptap editors with intelligent node detection, keyboard shortcuts, and accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/text-button"
---

# Text Button

Convert selected nodes to paragraphs in Tiptap editors with intelligent node detection, keyboard shortcuts, and accessibility support.

A fully accessible text button for Tiptap editors. Easily convert content to paragraph/text format with keyboard shortcut support and flexible customization options.

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

## Installation

Add the component via the Tiptap CLI:

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

## Components

### `<TextButton />`

A prebuilt React component that converts content to paragraph/text format.

#### Usage

```tsx
<TextButton
  editor={editor}
  text="Text"
  hideWhenUnavailable={true}
  showShortcut={true}
  onToggled={() => console.log('Converted to text!')}
/>
```

#### Props

| Name                  | Type             | Default     | Description                                            |
| --------------------- | ---------------- | ----------- | ------------------------------------------------------ |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                             |
| `text`                | `string`         | `undefined` | Optional text label for the button                     |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when text conversion is not available |
| `onToggled`           | `() => void`     | `undefined` | Callback fired after a successful conversion           |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)         |

## Hooks

### `useText()`

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

#### Usage

```tsx
function MyTextButton() {
  const { isVisible, isActive, canToggle, handleToggle, label, shortcutKeys, Icon } = useText({
    editor: myEditor,
    hideWhenUnavailable: true,
    onToggled: () => console.log('Converted to text!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleToggle} disabled={!canToggle} aria-label={label} aria-pressed={isActive}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                          |
| --------------------- | ---------------- | ----------- | ---------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                           |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if text conversion is not available |
| `onToggled`           | `() => void`     | `undefined` | Callback fired after a successful conversion         |

#### Return Values

| Name           | Type            | Description                                  |
| -------------- | --------------- | -------------------------------------------- |
| `isVisible`    | `boolean`       | Whether the button should be rendered        |
| `isActive`     | `boolean`       | If paragraph/text format is currently active |
| `canToggle`    | `boolean`       | If text conversion is currently allowed      |
| `handleToggle` | `() => boolean` | Function to convert content to text format   |
| `label`        | `string`        | Accessible label text for the button         |
| `shortcutKeys` | `string`        | Keyboard shortcut (Cmd/Ctrl + Alt + 0)       |
| `Icon`         | `React.FC`      | Icon component for the text button           |

## Utilities

### `canToggleText(editor, turnInto?)`

Checks if content can be converted to text/paragraph format in the current editor state.

```tsx
import { canToggleText } from '@/components/tiptap-ui/text-button'

const canToggle = canToggleText(editor) // Check if can convert to text
const canTurnInto = canToggleText(editor, true) // Check if can turn into paragraph
```

### `toggleParagraph(editor)`

Programmatically converts the current selection or node to paragraph format.

```tsx
import { toggleParagraph } from '@/components/tiptap-ui/text-button'

const success = toggleParagraph(editor)
if (success) {
  console.log('Content converted to text successfully!')
}
```

### `isParagraphActive(editor)`

Checks if paragraph/text format is currently active.

```tsx
import { isParagraphActive } from '@/components/tiptap-ui/text-button'

const active = isParagraphActive(editor)
```

## Keyboard Shortcuts

The text button supports the following keyboard shortcut:

- **Cmd/Ctrl + Alt + 0**: Convert content to text/paragraph format

The shortcut is automatically registered when using either the `<TextButton />` component or the `useText()` hook.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `@tiptap/starter-kit` - Basic Tiptap extensions including paragraph support
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

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