Create a button in Composer

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 and how to add an icon to a button.

In this article

• What are buttons?
• Step 1: Add and format your button text
• Step 2: Browse button styles
• Step 3: Apply the button styling
• Adding icons to the left and right of buttons
• Callout buttons (special formatting)
• Save and publish 

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.

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.

Adding icons to the left and right of buttons

Your Style Guide also includes options for adding an icon to the left or right of your button text. This is a two-part process: the placement is set in the Link modal like any other button class, but the icon itself is added in HTML view.

• Step 1: Set the button class and icon placement. Follow Step 3 above to open the Link modal and use the Class dropdown to select your button style class, along with either icon-left or icon-right depending on which side of the button text you want the icon to appear. Save the link as usual.
• Step 2: Add the icon class in HTML view. The specific icon itself can't be selected from the Class dropdown. It needs to be added directly to the button's markup. Switch the Content element to HTML view and add the icon class to the button's link tag. Open your Style Guide and scroll to the list below the Buttons section to find the exact icon class names available to you.

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, the styling looks correct, and any icon appears on the intended side.

Buttons = text + link + style class (plus an optional icon, placed left or right). Browse styles with the Styles dropdown, but create buttons using the Link modal's Class dropdown — and if you're adding an icon, finish up by adding the icon class in HTML view. Always test your buttons after publishing.