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