A Button is a link that looks like a button, such as "Subscribe", "Read more" or "Get in touch". It can open a page, Ghost's sign-up and account window, or one of your dialogs.
You can add a Button to a Section, a Post Content section or a Dialog section, and inside a Collection, a Form, a Group, a No Results block, a Paywall or the cookie choices of a cookie banner. In the block picker it sits under Common. Click a Button on the canvas to select it. Its settings open in the right sidebar, where "the + menu" in the tables below is the + beside the name of a group of settings, such as General. Inside a Form, the Button sends the form, whatever its On click says.
Variant and format
The top of the right sidebar picks the button's look. The looks are called variants, and the sizes formats. Both come from the Button entry in the Blocks panel, in the icon rail.
Setting
What it does
Variant
The look: Filled (the default) has your accent color as its fill, Secondary a light grey fill, Outline a thin border and no fill, and Link looks like a text link, with no fill and no padding. Each variant also has its own look when the pointer is over it and when it is pressed.
Small
A switch for each format of the Button besides Default. Turned on, the button takes that format's padding and text size. A new project has one, Small.
To change how every Filled button in the project looks, or to add a variant of your own, click the arrow beside the block's name at the top of the panel and select Edit block. Reset to, followed by the variant's name, such as Reset to Filled, in the same menu clears the colors, spacing and other looks you changed on this button alone. Change how every button looks shows the steps, and How block variants and formats work explains the idea.
General
Setting
What it does
Label
The text on the button. The default is "Get Started". The braces icon beside the label, Insert variable, adds data such as the site title.
On click
What the button does: Open link (the default), Open Portal, Open dialog or Close dialog.
Portal page
Shows for Open Portal. Which page of Ghost's sign-up and account window opens: Sign up (the default), Sign in, Account, Plans, Profile, Newsletters or Recommendations. It works on a Ghost site with members turned on.
Link to its page
Shows for Open link inside a Collection. Opens the page of the post, tag or author the button stands in, such as a "Read more" button on a post card.
Link URL
Shows for Open link. Where the button goes: a page of your site such as /about, a part of the page such as #pricing, or another site such as https://example.com. The default is /, your home page. The Link URL button on the canvas toolbar edits the same value. A link to another site opens in a new tab while Open external links in a new tab is on in Project settings › Features, as it is by default.
Dialog
Shows for Open dialog. Which of your Dialog sections opens, such as a mobile menu or a sign-up popup. With no dialog in the project, the field reads "Add a Dialog section first". Open a popup or side drawer from a button explains it.
Icon
An icon beside the label, from the icon picker. Add it from the + menu beside General.
Position
Shows when the button has an icon. Before (the default) puts the icon left of the label, After puts it right of the label.
Accessible Label
Shows when the button has an icon and no label. What screen readers announce for an icon-only button, such as "Search".
Close dialog closes the dialog the button sits in. Use it for a "Close" or "No thanks" button inside a popup.
Typography, colors and appearance
Group
Settings
Typography
Size, Weight and Style, and more from the + menu. Typography settings describes them.
Colors
Background, from the variant, such as Accent for Filled. Text color: Default picks a color that reads on the fill. Gradient from the + menu.
Spacing
Padding, from the variant and the format, and Margin from the + menu.
Appearance
Border and Corners. Uppercase, from the + menu, sets the label in capital letters. Shadow from the + menu.
A value you change here applies to this button only and overrides its variant. Colors and appearance settings describes the colors, the border, the corners and the shadow.
A Button also has Width from Layout settings, and the Display settings and Advanced settings of every block. With Audience under Display, a "Sign up" button can show to visitors only and an "Account" button to members only.
A Button is a link that looks like a button, such as "Subscribe", "Read more" or "Get in touch". It can open a page, Ghost's sign-up and account window, or one of your dialogs.
You can add a Button to a Section, a Post Content section or a Dialog section, and inside a Collection, a Form, a Group, a No Results block, a Paywall or the cookie choices of a cookie banner. In the block picker it sits under Common. Click a Button on the canvas to select it. Its settings open in the right sidebar, where "the + menu" in the tables below is the + beside the name of a group of settings, such as General. Inside a Form, the Button sends the form, whatever its On click says.
Variant and format
The top of the right sidebar picks the button's look. The looks are called variants, and the sizes formats. Both come from the Button entry in the Blocks panel, in the icon rail.
To change how every Filled button in the project looks, or to add a variant of your own, click the arrow beside the block's name at the top of the panel and select Edit block. Reset to, followed by the variant's name, such as Reset to Filled, in the same menu clears the colors, spacing and other looks you changed on this button alone. Change how every button looks shows the steps, and How block variants and formats work explains the idea.
General
/about, a part of the page such as#pricing, or another site such ashttps://example.com. The default is/, your home page. The Link URL button on the canvas toolbar edits the same value. A link to another site opens in a new tab while Open external links in a new tab is on in Project settings › Features, as it is by default.Close dialog closes the dialog the button sits in. Use it for a "Close" or "No thanks" button inside a popup.
Typography, colors and appearance
A value you change here applies to this button only and overrides its variant. Colors and appearance settings describes the colors, the border, the corners and the shadow.
A Button also has Width from Layout settings, and the Display settings and Advanced settings of every block. With Audience under Display, a "Sign up" button can show to visitors only and an "Account" button to members only.