Features

  • Opt for horizontal or vertical grouping
  • Add normal buttons or dropdown buttons
  • Choose that horizontal button groups go vertical at Mobile breakpoint
  • Choose preset or custom styling
  • Add tooltips to your buttons and dropdowns*

*Note: You must enable Tooltips in the Theme variations for the Foundry theme to use Tooltips on a page.


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

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.

Button Size
Choose the size of your button. You can opt of 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 Previews Mode and when published.

Button (Child Stack)

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

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.

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!

Dropdown (Child Stack)

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.

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!

Dropdown Link (Child Stack)

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.

Dropdown Header (Child Stack)

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.

Dropdown Divider (Child Stack)

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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us