Advanced Button — Documentation

Advanced Button is a call-to-action button with the extras core's button can't do: a leading or trailing icon, an optional sub-caption under the label, style and size presets, hover states, shadows, and an icon-only mode. It can render as a link or as a form submit button.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Advanced Button. Edit the label inline.

Content

Text — the button label, edited inline.

Sub-caption — enable Show sub-caption to reveal a smaller second line beneath the label (e.g. "No credit card required"). It sits inside the button under the main text.

Link

URL — where the button points.
Open in new tab — adds target="_blank" with rel="noopener noreferrer".
Nofollow / Sponsored — append the matching rel tokens.
Download — adds the download attribute so the link saves the file instead of navigating.
Button type — switch from a Link (<a>) to a Submit button (<button type="submit">) for use inside forms.

Icon

Icon — pick from the button icon set. Leave empty for a text-only button.
Position — Left or Right of the label.
Size and Gap — the icon size and the space between icon and text.
Icon only — hides the label visually and uses it as the aria-label, giving a compact square button.

The block sidebar is split into two tabs. Settings is what the button does; Styles is how it looks.

Tab	Section	Covers
Settings	Button	Label text, width preset
Settings	Link	URL, open in new tab, rel
Settings	Icon	Icon picker, position
Settings	Advanced	Visibility, Position, anchor, CSS class
Styles	Button	Everything visual, with Normal / Hover states
Styles	Spacing	Padding and margin on the outer wrapper

Presets

Style preset — Fill, Outline, and Text starting points. Size preset — small, medium, or large padding and font scaling. Presets set sensible defaults that the Styles rows override.

Styling the button

Styles → Button carries the whole stack. Text, background, and border each have Normal / Hover states — pick the state at the top of the row.

Row	What it does
Text	Label color, per state
Background	Solid color or gradient, per state
Typography	Family, weight, size, line height, letter spacing, transform, decoration
Border	Per-side width, style, and color, per state
Radius	Per-corner rounding
Shadow	Shadow and hover shadow
Width	Width and min-width, per device
Hover effect	Grow, shrink, float, sink, pulse, or shine

Spacing

Styles → Spacing sets per-side padding and margin on the outer wrapper. The block supports Wide and Full alignment and an HTML anchor.

Arranging multiple buttons

Advanced Button sits inside a lightweight group wrapper, so adding a second button next to the first gives you a button row automatically. Select the wrapper to control how the buttons sit together:

Orientation — a horizontal row or a vertical stack.
Alignment — left, center, right, or spread.
Gap — the space between buttons.
Stack on mobile — collapse a row into a stack on narrow screens so buttons never overflow.

Each button keeps its own icon, preset, and color settings — the wrapper only controls layout.

HTML output

// terminalhtml

<a
  href="https://example.com/pricing"
  class="ab-adv-btn ab-adv-btn--fill ab-adv-btn--md"
>
  <span class="ab-adv-btn__content">
    <span class="ab-adv-btn__text">Start free trial</span>
    <span class="ab-adv-btn__sub">No credit card required</span>
  </span>
  <span class="ab-adv-btn__icon"><svg>…</svg></span>
</a>

With Button type → Submit, the same markup renders as <button type="submit">…</button> instead of an anchor.