---
title: "Text align button"
description: "Change the text alignment in your Tiptap editor with this button UI component. More in the docs!"
canonical_url: "https://tiptap-docs.lin52025i.qzz.io/ui-components/components/text-align-button"
---

# Text align button

Change the text alignment in your Tiptap editor with this button UI component. More in the docs!

A fully accessible text align button for Tiptap editors. Easily set text alignment to left, center, right, or justify with keyboard shortcut support and flexible customization options.

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

## Installation

Add the component via the Tiptap CLI:

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

## Components

### `<TextAlignButton />`

A prebuilt React component that sets text alignment for a specific alignment type.

#### Usage

```tsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { TextAlign } from '@tiptap/extension-text-align'
import { TextAlignButton } from '@/components/tiptap-ui/text-align-button'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'] })],
    content: `
        <p>Try selecting a paragraph and clicking one of the text alignment buttons.</p>
        <p style="text-align: left">Left-aligned text.</p>
        <p style="text-align: center">Center-aligned text.</p>
        <p style="text-align: right">Right-aligned text.</p>
        <p style="text-align: justify">Justified text.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <TextAlignButton
        editor={editor}
        align="left"
        text="Left"
        hideWhenUnavailable={true}
        showShortcut={true}
        onAligned={() => console.log('Text aligned!')}
      />
      <TextAlignButton align="center" />
      <TextAlignButton align="right" />
      <TextAlignButton align="justify" />

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

#### Props

| Name                  | Type             | Default     | Description                                                       |
| --------------------- | ---------------- | ----------- | ----------------------------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                                        |
| `align`               | `TextAlign`      | `required`  | The alignment type (`"left"`, `"center"`, `"right"`, `"justify"`) |
| `text`                | `string`         | `undefined` | Optional text label for the button                                |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when alignment is not available                  |
| `onAligned`           | `() => void`     | `undefined` | Callback fired after a successful alignment change                |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)                    |

## Hooks

### `useTextAlign()`

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

#### Usage

```tsx
function MyTextAlignButton() {
  const { isVisible, isActive, canAlign, handleTextAlign, label, shortcutKeys, Icon } =
    useTextAlign({
      editor: myEditor,
      align: 'center',
      hideWhenUnavailable: true,
      onAligned: () => console.log('Text aligned!'),
    })

  if (!isVisible) return null

  return (
    <button
      onClick={handleTextAlign}
      disabled={!canAlign}
      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                         |
| `align`               | `TextAlign`      | `required`  | The alignment type to apply                        |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if alignment is not available     |
| `onAligned`           | `() => void`     | `undefined` | Callback fired after a successful alignment change |

#### Return Values

| Name              | Type            | Description                                   |
| ----------------- | --------------- | --------------------------------------------- |
| `isVisible`       | `boolean`       | Whether the button should be rendered         |
| `isActive`        | `boolean`       | If the specific alignment is currently active |
| `canAlign`        | `boolean`       | If text alignment is currently allowed        |
| `handleTextAlign` | `() => boolean` | Function to set text alignment                |
| `label`           | `string`        | Accessible label text for the button          |
| `shortcutKeys`    | `string`        | Keyboard shortcut for the specific alignment  |
| `Icon`            | `React.FC`      | Icon component for the text align button      |

## Utilities

### `canSetTextAlign(editor, align)`

Checks if a specific text alignment can be set in the current editor state.

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

const canAlign = canSetTextAlign(editor, 'center') // Check if center alignment can be set
```

### `setTextAlign(editor, align)`

Programmatically sets text alignment for the specified type.

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

const success = setTextAlign(editor, 'right')
if (success) {
  console.log('Text aligned to right successfully!')
}
```

### `isTextAlignActive(editor, align)`

Checks if a specific text alignment is currently active.

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

const active = isTextAlignActive(editor, 'justify')
```

## Keyboard Shortcuts

Each alignment type has its own keyboard shortcut:

- **Cmd/Ctrl + Shift + L**: Align left
- **Cmd/Ctrl + Shift + E**: Align center
- **Cmd/Ctrl + Shift + R**: Align right
- **Cmd/Ctrl + Shift + J**: Align justify

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

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `@tiptap/extension-text-align` - Text alignment extension
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `align-left-icon` (icon)
- `align-center-icon` (icon)
- `align-right-icon` (icon)
- `align-justify-icon` (icon)