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.
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.