Skip to main content

Inline Button Container

The Inline Button Container is a Container-type component that groups buttons together in-line, horizontally on Desktop views and automatically stacked on Mobile views.

The purpose of the Inline Button Container is to keep similar button ideas together and ensure that the spacing and distances between buttons remains consistent across all devices.

Authoring

The Inline Button Container component has no configurations needed; you just insert additional components inside. Inline Button Containers can only be used to insert Buttons and Text CTA components. 

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

Visit our pages on the Button or Text CTA component to see how to configure and set those up once they are placed within the Inline Button Container.

Examples

Example #1: Text CTA

Believe it or not, the list at the top of each component page is actually an Inline Button Container with Text CTA in each one.

Example #2: Buttons with similar text length

Example #3: Buttons with varying text length

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