Button

A styled link that behaves like a call-to-action. A leaf block, like paragraph — its label is a normal text run, plus a href prop.

json

{
  "id": "b1",
  "type": "button",
  "contentIds": ["r1"],
  "props": { "href": "https://example.com", "color": "", "customAttrs": [] }
}

Prop	Type	Default	Notes
`href`	`string`	`''`	Destination URL.
`color`	`string`	`''`	Optional accent color override.
`customAttrs`	`Array`	`[]`	Extra key/value attributes (e.g. `target`, `rel`, analytics attributes) editable via the block's own settings popover.

A button is deliberately excluded from the set of block types that merge their text into a preceding paragraph (e.g. via Backspace-merge) — concatenating a button's label into plain text would silently drop its href.

Slash command

Button — keywords: button, link, cta.

Styling

.be-button-block (the link itself), plus .be-button-block-label, .be-button-block-settings, .be-button-block-open for its editing chrome.

Using it in your editor

useEditor() registers every built-in block by default, button included. To register only the blocks you use instead:

jsx

import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, buttonBlockType } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, button: buttonBlockType }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining this with other types.