Color Text Button

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

Installation

Add the component via the Tiptap CLI:

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

Components

`<ColorTextButton />`

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

Usage

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

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.

import { canColorText } from '@/registry/tiptap-ui/color-text-button'

const canApply = canColorText(editor)

`isColorTextActive(editor, color)`

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

import { isColorTextActive } from '@/registry/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)