Basic widget

Button

A link that looks like a button, in your Design System’s styles: primary, secondary, outline, ghost or link.

See it live

Read the docs

Build it with your AI

“Add a “Book a call” button that links to /contact/, using our primary button style.”

Live demo

See it working

This is the real widget, not a picture

Settings

19 settings in three tabs

Every setting below is in the editor — and available to your AI through get_widget_schema.

Content

10 settings

Button

Text

Link

Style

Size

Icon

Icon position

Icon spacing

Alignment

Hover effect

Button ID

Design

9 settings

Button

Typography

Border radius

Padding

Icon size

Text color

Background

Border

Shadow

Border color

Behaviour

shared

On every element

Spacing & position

Background & border

Animations

Motion & effects

Scroll & mouse effects

Visibility

Conditions

Interactions

Attributes & CSS

Build it with AI

Just describe what you want

Your AI looks up the Button settings over MCP and writes the element for you — real, editable and on brand.

Claude · connected to your site

You

Add a “Book a call” button that links to /contact/, using our primary button style.

Claude · using Uncoder

Done — it’s on your site and fully editable.

Button added where you asked
Styled with your Design System
Checked on tablet and mobile

get_widget_schema
edit_elements
audit_page

What the AI writes

{
  "type": "button",
  "settings": {
    "text": "Primary",
    "link": { "url": "/download/" },
    "size": "sm",
    "radius": { "top": 999, "right": 999, "bottom": 999, "left": 999, "unit": "px" },
    "padding": {
      "top": 12,
      "right": 22,
      "bottom": 12,
      "left": 22,
      "unit": "px",
      "linked": false
    },
    "hover_effect": "flip",
    "background": { "type": "classic", "color": "var(--uncoder-c-primary)" },
    "text_color": "#ffffff",
    "hover_background": { "type": "classic", "color": "#13304D" },
    "hover_text_color": "#ffffff"
  }
}