---
title: "Color Text Button"
description: "Apply custom text colors in Tiptap editors with predefined color options, keyboard shortcuts, and full accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/color-text-button"
---

# Color Text Button

Apply custom text colors in Tiptap editors with predefined color options, keyboard shortcuts, and full accessibility support.

A fully accessible text color button for Tiptap editors. Apply foreground colors to selected text with keyboard shortcut support and flexible customization options.

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

## Installation

Add the component via the Tiptap CLI:

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

## Components

### `<ColorTextButton />`

A prebuilt React component that applies text colors to selected text.

#### Usage

```tsx
export default function MyEditor() {
  return (
    <ColorTextButton
      editor={editor}
      textColor="var(--tt-color-text-blue)"
      text="Blue Text"
      hideWhenUnavailable={true}
      showShortcut={true}
      onApplied={({ color, label }) => console.log(`Applied ${label} text color: ${color}`)}
    />
  )
}
```

#### Props

| Name                  | Type                         | Default     | Description                                        |
| --------------------- | ---------------------------- | ----------- | -------------------------------------------------- |
| `editor`              | `Editor \| null`             | `undefined` | The Tiptap editor instance                         |
| `textColor`           | `string`                     | `required`  | The text color to apply (CSS color value)          |
| `text`                | `string`                     | `undefined` | Optional text label for the button                 |
| `hideWhenUnavailable` | `boolean`                    | `false`     | Hides the button when text color is not applicable |
| `onApplied`           | `({ color, label }) => void` | `undefined` | Callback fired after applying a text color         |
| `showShortcut`        | `boolean`                    | `false`     | Shows a keyboard shortcut badge (if available)     |

## Hooks

### `useColorText(config)`

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

#### Usage

```tsx
function MyColorTextButton() {
  const { isVisible, isActive, canColorText, handleColorText, label, shortcutKeys, Icon } =
    useColorText({
      editor: myEditor,
      textColor: 'var(--tt-color-text-red)',
      label: 'Red Text',
      hideWhenUnavailable: true,
      onApplied: ({ color, label }) => console.log(`Applied: ${label}`),
    })

  if (!isVisible) return null

  return (
    <button
      onClick={handleColorText}
      disabled={!canColorText}
      aria-label={label}
      aria-pressed={isActive}
      style={{ color: isActive ? textColor : 'inherit' }}
    >
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                  | Type                         | Default     | Description                                      |
| --------------------- | ---------------------------- | ----------- | ------------------------------------------------ |
| `editor`              | `Editor \| null`             | `undefined` | The Tiptap editor instance                       |
| `textColor`           | `string`                     | `required`  | The text color to apply                          |
| `label`               | `string`                     | `required`  | Accessible label for the button                  |
| `hideWhenUnavailable` | `boolean`                    | `false`     | Hides the button if text color cannot be applied |
| `onApplied`           | `({ color, label }) => void` | `undefined` | Callback fired after applying text color         |

#### Return Values

| Name              | Type            | Description                              |
| ----------------- | --------------- | ---------------------------------------- |
| `isVisible`       | `boolean`       | Whether the button should be rendered    |
| `isActive`        | `boolean`       | If the text color is currently active    |
| `canColorText`    | `boolean`       | If the text color can be applied         |
| `handleColorText` | `() => boolean` | Function to apply the text color         |
| `label`           | `string`        | Accessible label text for the button     |
| `shortcutKeys`    | `string`        | Keyboard shortcut (Cmd/Ctrl + Shift + T) |
| `Icon`            | `React.FC`      | Icon component for the text color button |

## Utilities

### `canColorText(editor)`

Checks if text color can be applied in the current editor state.

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

const canApply = canColorText(editor)
```

### `isColorTextActive(editor, color)`

Checks if a specific text color is currently active in the selection.

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

const isRedActive = isColorTextActive(editor, 'red')
const isBlueActive = isColorTextActive(editor, 'var(--tt-color-text-blue)')
```

## Keyboard Shortcuts

The color text button supports the following keyboard shortcut:

- **Cmd/Ctrl + Shift + T**: Apply text color

The shortcut is automatically registered when using either the `<ColorTextButton />` component or the `useColorText()` hook. It applies the configured text color to the current selection.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `@tiptap/extension-text-style` - Text style extension for color support
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `text-color-small-icon` (icon)