> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

> Add and edit email buttons with the button bubble menu.

## Quick start

Add `BubbleMenu.ButtonDefault` and a slash command for inserting buttons.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { StarterKit } from '@react-email/editor/extensions';
import { BUTTON, BubbleMenu, SlashCommand } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

const content = `
  <p>Click the button below to see its bubble menu.</p>
  <div class="align-left"><a class="node-button button" data-id="react-email-button" href="https://react.email">Click me</a></div>
  <p>Use the slash command menu (type /) to insert more buttons.</p>
`;

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <BubbleMenu.ButtonDefault />
      <SlashCommand items={[BUTTON]} />
    </EditorProvider>
  );
}
```

## Button content format

Buttons in the editor are represented as styled anchor elements:

```html theme={"theme":{"light":"github-light","dark":"vesper"}}
<div class="align-left">
  <a class="node-button button" data-id="react-email-button" href="https://react.email">
    Click me
  </a>
</div>
```

The wrapping `div` controls alignment (left, center, or right), while the `<a>` tag renders
as a styled button in the editor and serializes to a React Email `<Button>` component on export.

## Editing buttons

When you click a button in the editor, the button bubble menu appears with:

* **Edit link** (pencil icon): Opens an inline form to change the button's URL
* **Unlink**: Removes the button link

The form validates URLs and lets you apply or cancel changes inline.

## Inserting buttons programmatically

Use the `setButton` command to insert a button via the editor API.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
editor.chain().focus().setButton().run();
```

This can be triggered from a custom toolbar.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { useCurrentEditor } from '@tiptap/react';

function Toolbar() {
  const { editor } = useCurrentEditor();
  if (!editor) return null;

  return (
    <button onClick={() => editor.chain().focus().setButton().run()}>
      Insert Button
    </button>
  );
}
```

## Examples

See buttons in action with a runnable example:

<CardGroup cols={2}>
  <Card title="Buttons" icon="code" href="https://react.email/editor/examples/buttons">
    Button insertion and editing with the button bubble menu.
  </Card>
</CardGroup>