Button

A button is a click target — a CTA, a link styled with weight, a Buy now trigger.

Buttons can carry a Lucide icon (real SVG paths) before or after the label. No emojis — buttons follow the greyscale palette and Lucide icon rule.

When to use it

Primary or secondary call-to-action
Navigation-style links that need visual weight
Form submit triggers
Pricing card Buy / Choose actions

When not to use it

Long body text — use Text
Inline links inside paragraphs — use the rich-text editor's link

inside a Text block

Multi-line clickable cards — use Rows with whole-cell link,

or Flip Box

Settings

Text — text input (default: Click Here)

Button label. Keep it short — 1–3 words. Buy now, Get started, Learn more.

URL — text input (default: `#`)

Where the button links to. Internal paths (/shop) or full URLs.

Open in New Tab — checkbox (default: off)

Sets target=_blank on the link.

Select Icon — button → Lucide picker

Opens the Lucide icon library. Pick one to add a glyph to the button. Lucide-only — no emojis, no custom uploads.

Icon Position — button group: Before · After (when icon set)

Where the icon sits relative to the label.

Icon Spacing — slider, 0–20px (default: 8) (when icon set)

Gap between icon and label.

Icon Size — slider, 20–40px (default: auto, follows text)

Pixel size of the icon. Default of 0 means it auto-scales with the button height.

Alignment — button group: Left · Center · Right · Full Width (default: Center)

Horizontal alignment OR Full Width — the button stretches to the parent container's full width. Full Width is the right choice for mobile primary CTAs.

Weight — button group: Regular · Bold (default: Bold = 700)

Label weight. Only two presets — for finer control, set the parent section's font and let the button inherit, or use a different control surface.

Colour swatches (row of 2)

Text — label colour. Default white.
Background — fill colour. Default #1d2327. The button is

always filled — there is no outline or ghost toggle. To get an outline-style button, set Background to transparent and add a Border.

Height — slider, 28–80px (default: 44)

Total button height. Font size and padding interpolate from this — there are no separate font-size or padding sliders. 28 = compact; 44 = standard CTA; 64+ = hero-scale.

Min Width — slider, 0–400px (default: 0)

Minimum button width. Default 0 = the button is as wide as its label (intrinsic width — current behaviour). Set to a value (e.g. 140) to give every button a uniform floor: short labels stretch to that width, long labels still grow past it (translation-safe).

Use this when you have multiple CTAs in a row — Start / Browse / Apply — and want them to line up cleanly without locking a fixed width that breaks the moment a label gets longer.

Border — section

#### Width — button group: Thin (1px) · Medium (2px) · Off (default: Off)

Toggle on by clicking; click again to deselect (data-toggleable).

#### Colour swatches (row of 2)

Border — base colour
Gradient — second colour. When set, the border becomes a

two-colour gradient.

#### Angle — slider, 0–360° (default: 135)

Gradient angle.

#### Spin — slider, 0–180°/s (default: 30)

Continuous rotation speed for the border gradient. 0 = static. Pairs nicely with Mouse sens for CTAs.

#### Mouse sens — slider, 0–100% (default: 0)

Mouse-tracked rotation. The border angle follows the cursor as it moves over the button. Set to 0 to disable.

#### Radius — slider, 0–60px (default: 6)

Corner roundness. 0 = sharp; 6 = standard; 60 = capsule.

Entrance animation

Shared widget at the bottom of the panel — preset, duration, delay for scroll-into-view animation.

Per-device overrides

Almost every setting (alignment, weight, height, border width, radius) has separate Tablet and Mobile values.

Common overrides:

Alignment — sometimes Center on desktop, Full Width on mobile

(touch targets)

Height — slightly larger on mobile (touch targets)

Common patterns

Primary CTA on dark hero

Background #fff · Text #1d2327 · Height 48 · Border Off · Radius 4 · Weight Bold.

Outline-style button (not a real toggle, but achievable)

Background transparent · Text #1d2327 · Border Width Thin · Border #999 · Radius 4.

Gradient-border CTA

Background #1a1d21 · Text #fff · Border Width Medium · Border #e0e0e0 · Gradient #999 · Spin 30 · Mouse sens 30 · Radius 100 (pill).

Tertiary back link

Background transparent · Text #999 · No border · Icon arrow-left Before · Height 28.

Don't

Don't expect a Style toggle (Filled / Outline / Ghost). Style is

implicit — composed from Background + Border.

Don't put two visually-loud primary CTAs next to each other — pick

one, make the other a Tertiary.

Don't use emojis in labels (greyscale rule). Always Lucide.
Don't run Spin + Mouse sens at max on every button — visual noise

on cursor movement.

blocks/heading — pairs with buttons in CTAs
blocks/section — wrap buttons in a Section with Direction → for

side-by-side primary + secondary CTAs

blocks/flip-box — for hover-flipping cards (richer than buttons)
concepts/responsive-overrides — per-device button sizing