Button Group

Base Foundry stack

Create beautiful button groups in a snap. Add a button or dropdown to the group and rearrange it to get just the layout you’re looking for.

  • Add normal buttons, dropdown buttons or buttons that trigger a modal
  • Mix and match button types
  • Set button font using Typeface font assignments
  • Set font weight when using Typeface fonts
  • Choose preset or custom styling
  • Opt for horizontal or vertical grouping
  • Choose that horizontal button groups go vertical at Mobile breakpoint
  • Include drop shadow on button group
  • Add tooltips to your buttons and dropdowns
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

The Button Group stack example we’re showing here is a horizontal grouping. You can also choose to use a vertical grouping. We’ve set this horizontal button group to re-orient itself to a vertical group when displayed at the Mobile breakpoint.


Using Button Group

General

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Button text.

Font Weight v2
Use this setting to adjust the font weight of your Button text when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Style

Orientation
Choose whether you’d like to have your Button Group appear as a Horizontal or Vertical grouping. If you choose Horizontal you can opt to have the Button Group switch to a vertical grouping at the Mobile breakpoint to make sure it fits properly on smaller displays.

Alignment
Allows you to set the justification of the Button itself. You can set the alignment to Left, Center or Right. You can also choose to set the alignment differently at each of the three breakpoints.

Size
Choose the size of your button. You can opt for a Small, Standard or Large button size.

  • Please Note: Due to the way the sizing is applied you will not notice a change in size in Edit Mode, but the size will be applied in Preview Mode and when published.

Button Shadow v2

Shadow
Enable this setting to add a drop shadow to your Button Group. You'll be presented with other options then to configure how the button's shadow appears.

Disable at Mobile Breakpoint
This feature will automatically turn off your drop shadow when your page is viewed at the mobile breakpoint.

Vertical & Horizontal Offset
You can set a custom vertical and horizontal offset for your shadow independent of one another. In addition you can also set those offsets to be different at each of the individual breakpoints.

Blur
This setting determines how crisp or soft your drop shadow will appear.

Color
Allows you to choose the color of your drop shadow.


Child Stack

Button

Button Text
Insert your custom text that will appear on your button.

Link
Provide a link to a URL, whether it be an internal page or an external link. You can also set the following tags in the RapidWeaver link dialog:

  • Class
  • ID
  • Rel
  • Target

Icon v2
When enabled you're given the ability to choose an icon to add to your button. Additionally you can also choose whether the icon will be placed on the left- or right-hand side of your button's text.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Child Stack

Modal

Button Text
Insert your custom text that will appear on your button.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Enable Close X
Include a small X in the upper right corner of the modal dialog that allows the visitor to close the modal.

Size
Choose from three different modal dialog sizes. Small, Standard and Large.

Include...
Choose whether to add a header or footer to your modal dialog popup. The header can contain custom text. The footer can contain either text or a button that allows the visitor to close the modal. You can also customize the close button’s text as well as its alignment.

Title Alignment
Allows you to set the justification of the Modal’s header text. You can set the alignment to Left, Center or Right.

Animate
Enables a simple animation that makes the modal dialog slide down from the top of the browser window.

Collapse Modal
Allows you to collapse the drop zone for the modal content in Edit Mode, freeing up space to more easily work on building your pages and rearranging your stacks within them.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Child Stack

Dropdown

Label
Insert your custom text that will appear on your button for the dropdown.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers. You can also opt for a gradient background which will allow you to use a series of custom color pickers to design your own gradient.

Collapse
Enable this feature to free up some space in Edit Mode by hiding the dropdown’s content from view until you need to edit it again. Has no effect on the published page.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Child Stack (for Dropdown)

Dropdown Link

The Dropdown Link child stack is a child stack inside the Dropdown stack itself.

Label
Insert your custom text that will appear on your link for the dropdown link.

Disabled
Set the link to be un-clickable and greyed out.

The Dropdown Header child stack is a child stack inside the Dropdown stack itself.

Header
Insert your custom text that will appear inside of your Dropdown. This text is not clickable and has a smaller font size. Used to set apart different links within the dropdown for organization.

Child Stack (for Dropdown)

Dropdown Divider

The Dropdown Divider child stack is a child stack inside the Dropdown stack itself. It has no options itself. It too can be used to set apart different links within the dropdown for organization.

Insight
Mix-and-match

The Button Group stack isn't just limited to normal buttons. You can mix and match button types within the stack by clicking th blue (+) icon at the bottom of the stack. Choose from a button, drop down or modal button.