Button element

Use the Button element to add a button <button> to your layout.

Locating the button element¶

To find the Button element:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. Within the Elements tab, look for the Button element.

The Button element includes the following fields:

Interaction¶

• Button text - Add text to show on the Button
• Title attribute - Add a title attribute 
• Type - Select the type of button
  • Back to top - Add a smooth scroll back to the top of the page
  • Scroll to - Add a smooth scroll to a jQuery selector
    • Scroll target - Enter a jQuery selector to target an element to scroll to.
    •  Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
    • Offset type
      • Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
      • Offset in PX - Offset the top of completed scroll position in pixels.
    • Modifier and/or jQuery animation - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
    • Open modal - Link to open a modal
      • Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
        Adding a trigger ID will allow for the focus will return to the body when the modal closes. 
      • Modal ID - Enter the ID of the modal to open

Custom style¶

• Button style - Apply a Button custom style. For more information, see Creating custom styles.

Match heights¶

• Match heights - Match the height of the element using:
  • None - Removes the match heights at the specific breakpoint
  • Class - Match the height of the element with another element with the same class name
  • Children with class - Match the heights of any child elements with the same class name
  • Child element - Match the heights of all child elements of the same type.

For more information on Match heights, see Match the heights of elements.

Comments¶

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.