Create beautiful grouped sets of buttons in a snap. Add a button or dropdown to the group and rearrange them to get just the layout.
The Button Group stack example we’re showing here is a horizontal grouping. We've opted to have the Button Group re-orient to a vertical layout for breakpoints smaller than Medium.
Need to place the button group in a tight location? Maybe just looking for a different look and feel? The Button Group tool allows you to opt to display the buttons within it vertically at all times.
Button Groups are a great way to pair up buttons, drop downs and modal triggers that might relate to one another. This provides a streamlined, modern look for call to action items.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.
Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.
Here you can adjust the size of the buttons within the group using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Gives you the option of whether you want your Button Group to be horizontal or vertical. Horizontal groups can be set to change its orientation to vertical at a user breakpoint picked by the user, while a vertical group will always be vertical.
When using the Horizontal orientation for the Button Group you can choose to have it go vertical when the browser or device breakpoint goes below a certain width. You can choose the Small, Medium or Large breakpoints for this feature. Or if you'd rather the horizontal orientation of the group be maintained at all breakpoints you can simply disable this feature. The default breakpoint is Medium.
This setting allows you to align the Button Group to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the group independently at each of the 6 responsive breakpoints giving you more granular control.
Used to add a decorative shadow to the Button Group. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear on your button within the Button Group. Leave it blank if you'd like to use a button with only an icon.
Allows you to provide a link to a URL, whether it be an internal page or an external link. When using a button to trigger a Foundry Modal be sure to leave the link blank.
When enabled you can add an ARIA label for accessibility to your button.
The button childitem offers several different style modes to choose from. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
The button child item will be shown in a way the mimics a standard link on the page. It will take on the link styling provided in the Control Center. It will still retain the button's normal padding however to ensure it works with other items in the group.
Provides color pickers for styling the button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs. This is enabled by default.
When using Preset mode for your button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
When enabled this will make the button un-clickable and apply a disabled style to it.
Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to then choose one of the preset icon choices or choose Custom and type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites.
By default the Icon Library setting is set to None, which disables the icon.
Allows you to choose which side of the button's text you wish to place the icon. You can choose from left or right. Unlike the normal Button tool you cannot apply the icon as a bagde on the button. This is to prevent it overlapping ther ajoined buttons in the group.
This feature allows us to use a button to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is our Button, which gives us much greater control over our page's design and layout.
The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the button to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.
Here we can choose between having a simple Tooltip or a more advanced Popover added to our Button. These elements appear when the visitor hovers over the button. By default we have the Type set to None, which turns off this feature.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear in the group for your drop down.
When enabled you can add an ARIA label for accessibility to your button.
The button childitem offers several different style modes to choose from. Below we look at each of the style modes and what they have to offer:
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided a color picker for setting the text color.
The button child item will be shown in a way the mimics a standard link on the page. It will take on the link styling provided in the Control Center. It will still retain the button's normal padding however to ensure it works with other items in the group.
Provides color pickers for styling the button's background, border and text colors, as well as providing alternate colors for each of these for when the visitor hovers over the button.
We provide two different gradient style options. In the Two Color Gradient setting you're given color pickers for the gradient's two colors as well as the button border and text. Much like the Custom Styling option you can also adjust the styling for the hovered button as well. You've also got control over the angle of the gradient.
Much the same as the Two Color gradient option, but with the added ability to choose four colors as well as choose the color position along the gradient for each of the four colors. Again, you have control over the text and border, along with the gradient angle, and can adjust the gradient's colors for when it is hovered over by visitors.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs. This is enabled by default.
When using Preset mode for your button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
This is an alternate style for the drop down control. This seperates the label from the down down arrow, making the arrow itself the clickable item that triggers the drop down. This is off by default.
You can opt for either a light or dark background style for the drop down element. The enclosed items will be styled accordingly.
The direction control allows you to specify which direction you'd like the drop down to open. You can choose from down, up, left or right, with down being the default. The drop down is semi-smart though and if there is not enough room for it in the chosen direction it will attempt to open in a direction that ensures the visitor can see the drop down's contents.
Here you can configure how you'd like the content within the drop down itself to be aligned. You can opt for left, center or right and this alignment is applied at all 6 breakpoints.
Used to add a decorative shadow to the drop down when it is open. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Used to collapse the list of items within the drop down in the Edit Mode view. This helps tidy up the Edit Mode area when you're not actively working on the contents of the drop down.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear as a link within the Drop Down.
Allows you to provide a link to a URL, whether it be an internal page or an external link.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your text that will appear as a small decorative header within your Drop Down list.
Allows you to specify an options class, or classes, that will be added to this tool's child item. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
This is where you'll insert your small block of text that will be inserted as a child item within your Drop Down. This text is plain text only.