Skip to main content

Inline Button Container

Description

The Inline Button Container is a container type component that groups buttons together; horizontally on desktop and other large devices, stacked on mobile or small devices.

The purpose in using the Inline Button Container can include:

  • keep similar button ideas together
  • ensure that the spacing and distances between buttons remains consistent across all devices

Authoring

The Inline Button Container component is designed to contain only Button and/or Text CTA components. No configuration is needed.

The benefits of using the Inline Button Container component include:

  1. Once a row of Buttons or Text CTAs are added inside the Inline Button Container, they will automatically have fixed width gaps between them.
  2. In the event a button text is long, the next button will wrap cleanly to the next line.

Click for information on how to configure and see the options available for a Button or Text CTA component, once they are placed within the Inline Button Container.

Examples

Example #1: Buttons with similar text length

Example #2: Buttons with varying text length

This example also shows an icon being used in the button.