Button Extended for DatoCMS

A powerful DatoCMS plugin for advanced link and button management. Create fully configurable link fields with support for records, assets, URLs, telephone numbers and email addresses — including styling variants, icons, custom titles, aria-labels, nofollow and target control.

> Fork notice: This plugin is forked from Better Linking by Colin Dorr. It extends the original with additional features such as icon selection, nofollow control, a redesigned responsive grid layout, and has been migrated to Vite, React 19 and DatoCMS Plugin SDK v2. Full credit to Colin Dorr for the original plugin concept and implementation.

Features

• Multiple link types — Records, Assets, URLs, Telephone numbers, Email addresses
• Styling variants — Define custom CSS class variants (e.g. CTA, Secondary, Outline) in global or field-level settings
• Icon selection — Configure icon options per styling variant, selectable by editors
• Title override — Optional custom link text
• Aria-label — Dedicated accessibility label for screen readers
• Open in new window — Target _blank toggle
• NoFollow — Conditional rel="nofollow" toggle (appears when "Open in new window" is active)
• Responsive grid layout — Clean 2-column layout that collapses on narrow containers
• Per-field configuration — Override global plugin settings on individual fields
• Structured JSON output — Full data object with a convenient formatted summary for GraphQL queries

Installation

1. Install the plugin from the DatoCMS Marketplace or add it as a private plugin.
2. Go to the plugin settings and configure Link Settings, Styling Settings and Icon Settings. These values will serve as defaults for all link fields.
3. Create a new JSON field on a model.
4. Under Presentation, choose the Button Extended appearance.
5. Optionally override the default Link, Styling and Icon settings per field in the field appearance configuration.
6. Save and start using the field.

GraphQL Response

When querying a Button Extended field via GraphQL, the full JSON object is returned. The most useful part is the formatted object, which contains a clean summary of the link configuration:

1
{
2
  "formatted": {
3
    "isValid": true,
4
    "type": "url",
5
    "text": "Made by App Bis Web",
6
    "ariaLabel": "Based on Better Linking",
7
    "url": "app-bis-web.de",
8
    "target": "_blank",
9
    "rel": "nofollow",
10
    "noFollow": true,
11
    "class": "cta",
12
    "icon": "gift"
13
  }
14
}

Unconfigured buttons

Button fields are optional. When no link type is selected, the field stores null instead of a JSON object. This keeps the record payload minimal — especially important for multilingual records with multiple button fields that can quickly approach the DatoCMS 300 KB record size limit.

Make sure your frontend code handles this gracefully:

1
const button = JSON.parse(rawButtonField);
2
if (!button?.formatted?.isValid) return null;

Formatted fields

Full response example

1
{
2
  "linkType": {
3
    "label": "URL",
4
    "value": "url"
5
  },
6
  "stylingType": {
7
    "label": "CTA",
8
    "value": "cta",
9
    "allowIcons": true
10
  },
11
  "iconType": {
12
    "label": "Gift",
13
    "value": "gift"
14
  },
15
  "url": {
16
    "title": "URL",
17
    "url": "app-bis-web.de"
18
  },
19
  "formatted": {
20
    "isValid": true,
21
    "type": "url",
22
    "text": "Made by App Bis Web",
23
    "ariaLabel": "Based on Better Linking",
24
    "url": "app-bis-web.de",
25
    "target": "_blank",
26
    "rel": "nofollow",
27
    "noFollow": true,
28
    "class": "cta",
29
    "icon": "gift"
30
  },
31
  "custom_text": "Made by App Bis Web",
32
  "aria_label": "Based on Better Linking",
33
  "open_in_new_window": true,
34
  "nofollow": true,
35
  "isValid": true
36
}

Upgrading to v1.1.0

Version 1.1.0 optimizes the stored JSON payload. This is fully backward compatible:

• Existing configured buttons are unchanged and continue to work as before.
• Unconfigured buttons will be migrated to null the next time an editor saves the record, freeing up space.
• Frontend code that already uses null-safe access (e.g. button?.formatted?.url) requires no changes. If your code checks for === null on fields like rel, class or icon, update it to use a falsy check (!button.formatted.rel) since these properties are now omitted rather than set to null.

Compatibility

Development

1
npm install
2
npm run dev

The dev server starts at http://localhost:5173. Add this URL as the entry point in your DatoCMS private plugin settings.

1
npm run build    # Production build (outputs to dist/)
2
npm test         # Run tests

Credits

This plugin is based on Better Linking by Colin Dorr. The original plugin provided the foundation for link type management, styling variants, custom text, aria-labels and target control within DatoCMS.

Button Extended builds on top of this by adding:

• Icon selection dimension with per-variant configuration
• NoFollow (rel="nofollow") toggle
• Redesigned responsive 2-column grid layout
• Migration from Create React App to Vite
• Upgrade to React 19 and DatoCMS Plugin SDK v2
• Lucide Icons (locally bundled, no CDN)
• Improved type safety and error handling

Author

Jan Luther — app-bis-web.de

License

This project is licensed under the GNU General Public License v3.0.