> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/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.

```vue theme={null}
<script setup lang="ts">
import { EditorProvider } from '@vuemaildev/editor';
import { StarterKit } from '@vuemaildev/editor/extensions';
import { BUTTON, BubbleMenu, SlashCommand } from '@vuemaildev/editor/ui';
import '@vuemaildev/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="vuemail-button" href="https://vuemail.dev">Click me</a></div>
  <p>Use the slash command menu (type /) to insert more buttons.</p>
`;
</script>

<template>
  <EditorProvider :extensions="extensions" :content="content">
    <BubbleMenu.ButtonDefault />
    <SlashCommand :items="[BUTTON]" />
  </EditorProvider>
</template>
```

## Button content format

Buttons in the editor are represented as styled anchor elements:

```html theme={null}
<div class="align-left">
  <a class="node-button button" data-id="vuemail-button" href="https://vuemail.dev">
    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 Vuemail `<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.

```ts theme={null}
editor.chain().focus().setButton().run();
```

This can be triggered from a custom toolbar, a component inside `EditorProvider` that gets the editor
with `useCurrentEditor()`.

```vue toolbar.vue theme={null}
<script setup lang="ts">
import { useCurrentEditor } from '@vuemaildev/editor/core';

const { editor } = useCurrentEditor();
</script>

<template>
  <button
    v-if="editor"
    type="button"
    @click="editor.chain().focus().setButton().run()"
  >
    Insert Button
  </button>
</template>
```

## Examples

See buttons in action with a runnable example:

> **[Buttons](https://vuemail.dev/editor/buttons)**
>
> Button insertion and editing with the button bubble menu.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.