<Button>
A call-to-action — a styled, padded link that looks like a button.
<Button>
A call-to-action — a styled, padded link that looks like a button.
| Prop | Type | Default | Description |
|---|---|---|---|
hrefrequired | url | # | Destination URL. {{variables}} are allowed. |
align | enumleft | center | right | left | Horizontal alignment of the button. |
background-color | color | #18181b | Button fill color. |
text-color | color | #ffffff | Label color. |
border-radius | number | 9999 | Corner radius (px). |
inner-padding-x | number | 32 | Horizontal padding inside the button (px). |
inner-padding-y | number | 12 | Vertical padding inside the button (px). |
Common props
Every block accepts these in addition to its own props.
| Prop | Type | Default | Description |
|---|---|---|---|
margin-bottom | number | 16 | Vertical space (px) below the block. |
className | string | — | Tailwind-style utility classes compiled to inline CSS at render (e.g. "mt-4 text-zinc-500 sm:hidden"). Responsive/pseudo variants are hoisted into a <style> block. `class` and `tw` are accepted as aliases in code. |
custom-css | css | — | Extra inline CSS declarations merged onto the block's root element (e.g. "letter-spacing: 1px; opacity: 0.9"). Inlined so it survives every client. |
Per-side spacing is also supported via padding and margin objects in the visual editor's inspector.