Create a button in Composer

Misty Flowers

July 28, 2017 19:30

Buttons in Composer are created by adding a link in a Content element and applying a button class from the link's Class dropdown. This article walks through the seven-step procedure, including how to add caption text for Callout buttons.

💡Quick answers

Where are buttons created? Inside a Content element. Add a Content element to the page (or open an existing one), type the button text, then turn it into a link.
Creating a basic button? Type the button text in a Content element, highlight it, open the Link menu, set the link target, then choose a button style from the Class dropdown. Save the link, save the element, and publish.
Can a Callout button include caption text? Yes. Italicize the text that should appear as the caption before adding the link. Refer to the Style Guide for Callout button specifics.
Where do button styles come from? From the Class dropdown in the Link settings. Available classes depend on the site's Style Guide and theme.

Buttons in Composer are created by combining text content with a styled link. The process has two distinct phases: first, you browse available button styles to decide what you want; then, you apply that style to your button link. This guide walks you through both phases so your buttons look and behave exactly as intended.

What are buttons?

In Composer, a button is simply text that has been styled with a link. Unlike a plain text link, buttons are visually prominent and call attention to important actions like "Sign Up," "Learn More," or "Download."

Buttons are created in two phases:

Phase 1: Browse styles. Use the Styles dropdown or your site's Style Guide to see what button options are available and how they look.
Phase 2: Apply a style. Highlight your button text and use the Link modal to apply the style you chose.

Step 1: Add and format your button text

Start by adding the text that will become your button.

Add a Content element to your page or click into an existing Content element to edit it.
Type your button text. Enter the text you want the button to display, such as "Sign Up," "Learn More," "Download PDF," etc.
For Callout buttons only: If you're creating a Callout button with a title and caption, type the full text and then italicize the caption portion. See the Callout buttons section below for details.

Step 2: Browse button styles

Before you link your button, take a moment to explore what button styles are available so you know which one you want to apply.

Open the Styles dropdown. In the Composer toolbar, click the Styles dropdown to see a preview of available button styles.
Browse your Style Guide. Your site has a dedicated Style Guide that shows all button options, their names, and how they appear on your site. This is the best place to see all available choices and understand how they'll look.
Choose your button style. Decide which button style you want to use based on what you see in the Styles dropdown and Style Guide.

⚠️ Important Note

The Styles dropdown is only for browsing and planning. It does NOT apply any styling to your text. The actual styling happens in Step 3 using the Link modal.

Step 3: Apply the button styling

Now that you know which style you want, highlight your button text and apply it using the Link modal.

Highlight your button text. Select all the text you want to turn into a button.
Click the Link icon. In the Composer toolbar, click the Link icon (or use Ctrl+K on Windows or Cmd+K on Mac). This opens the Link modal.
Enter the link destination. In the URL field, enter the URL where the button should link to (e.g., a page on your site or an external URL).
Select the button style from the Class dropdown. Look for the "Class" dropdown in the Link modal. Click it and select the button style you chose in Step 2. The class names typically match the style names from your Style Guide (e.g., "btn-primary," "btn-secondary," etc.).
Save the link. Click Save or Confirm to apply the button styling to your text.

⚠️ Important: Link modal, not Styles dropdown

The Class dropdown in the Link modal is where you actually apply the button style.

Simply clicking the Styles dropdown will not create a button.
Use the Link icon and the Class dropdown inside the Link modal to make a button work!

Callout buttons (special formatting)

Callout buttons display a title with a smaller caption text below it. They require a slightly different setup.

Type both the title and caption. Enter the button title and caption text as a single line, separated by your desired formatting (e.g., "Sign Up for the Newsletter" where "for the Newsletter" is the caption).
Italicize the caption text. Highlight the portion of text you want to appear as the smaller caption and apply italic formatting using Ctrl+I (Windows) or Cmd+I (Mac).
Create the link as normal. Highlight the entire button text (both title and caption) and follow the steps in Step 3 to apply the Callout button style using the Class dropdown in the Link modal.

Your Style Guide will specify which class name corresponds to Callout buttons and show you examples of how they appear on your site.

Save and publish

Save the Content element. Click Save to save your changes to the Content element.
Publish the page. Click the Publish button to push your page and buttons live to the site.
Test your buttons. After publishing, click each button on the live site to verify the link works and the styling looks correct.

Buttons = text + link + style class. Browse styles with the Styles dropdown, but create buttons using the Link modal's Class dropdown. Always test your buttons after publishing.