Button Group
Display multiple buttons together in a single module with shared global styles and per-button overrides for text, icons, click actions, and appearance.
Usage​
The Button Group module displays multiple buttons in a single layout element. It renders a group container with a shared style baseline — configure layout, typography, colors, backgrounds, and borders at the group level, then override appearance settings on each individual button as needed.
Use the Button Group module for paired calls to action, navigation groups, or any situation where two or more buttons appear together and share a consistent visual style.
The Button Group module is designed for multiple buttons displayed together. If you only need a single button, use the Button module instead.
Module settings​
The Button Group module settings control the button list, shared group styling, and per-button behavior.
Buttons tab​
The Buttons tab is where you build and manage the list of buttons in the group.
Button Group Label
An optional accessibility label for the button group container. The value is added as an aria-label attribute on the rendered HTML element.
For example, entering Hero Buttons outputs aria-label="Hero Button Group" in the HTML. Use this to improve screen reader context when the group's purpose is not clear from surrounding content.
<div class="fl-module fl-module-button-group fl-button-group fl-button-group-buttons fl-button-group-layout-horizontal fl-button-group-width- fl-node-cqnvjm3i7xd4" role="group" aria-label="Hero Button Group" data-node="cqnvjm3i7xd4">
Add Buttons
Manages the list of buttons in the group. Click Add button to add a new button to the group, or click Edit on an existing button to open its settings.
Each row in the list also includes Move, Duplicate, and Delete action icons:
- Move: Drag and drop the button row to change the order in which buttons appear in the group.
- Duplicate: Creates a copy of the button, including all its General and Style tab settings, and adds it to the end of the list.
- Delete: Removes the button from the group.
The Move and Delete actions only appear once the group contains more than one button.
Each button has its own General tab and Style tab, described in Individual button settings.
Deleting a button cannot be undone after you click Publish.
Style tab​
The Style tab controls layout, spacing, alignment, and the shared visual appearance of all buttons in the group.
Global style settings apply to every button by default. You can override them on any individual button's Style tab.
Layout
Controls the direction, width, alignment, and spacing of the button group.
Layout settings
Layout
Controls the direction in which buttons are arranged.
- Horizontal: Buttons are placed side by side. When screen width decreases, buttons wrap to a new line.
- Vertical: Buttons are stacked. When text is too long to fit, it wraps within the button rather than pushing to a new line.
Width Default: Default
Controls the global width of buttons in the group.
- Default: In a Vertical layout, each button stretches to fill the full width of the container. In a Horizontal layout, each button is sized based on its content.
- Custom: Sets a uniform width for all buttons in the group, aligned within the container based on the Align setting.
Custom Width
Custom Width (Custom Only) Default: 200; Supports: Responsive
Sets a fixed width for all buttons in px, vw, or % when Width is set to Custom.
Align Supports: Responsive
Controls the alignment of the buttons within the button group container. Options are Left, Center, and Right.
In a Horizontal layout, alignment positions the row of buttons within the container. In a Vertical layout, alignment controls the horizontal position of each button within the container. This field is hidden when Layout is set to Vertical and Width is set to Default.
Container Padding Supports: Responsive
Adjusts the padding between the edge of the button group container and the buttons inside it.
Button Padding Supports: Responsive
Adjusts the padding between the edge of each button and its content. This is a global default that can be overridden on each button's individual Style tab.
Button Spacing Supports: Responsive
Controls the horizontal or vertical space between buttons in the group.
Text
Sets the default text color and typography for all buttons in the group. Individual button Style tabs can override these settings.
Text settings
Text Color
The button text color in the resting state.
Text Hover Color
The text color when the button is hovered. Defaults to the resting color if left blank.
Typography Supports: Responsive
The font settings for button text.
Typography settings
Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.
Background
Sets the default background appearance for all buttons in the group. Individual button Style tabs can override these settings.
Background settings
Background Color
The fill color in the resting state.
Background Hover Color
The fill color when the button is hovered. Defaults to the resting color if left blank.
Background Style Default: Flat
Selects the background rendering style.
- Flat: Applies a solid fill.
- Auto Gradient: Applies a lighter top and darker bottom gradient based on the background color.
- Advanced Gradient: Replaces the background color with custom gradients. Selecting this option hides Background Color and Background Hover Color and reveals the Background Gradient and Background Hover Gradient fields.
Background Gradient
Background Gradient (Advanced Gradient Only)
Configures the gradient colors, type, angle, and position when Background Style is set to Advanced Gradient.
Background Hover Gradient (Advanced Gradient Only)
Configures the hover gradient colors, type, angle, and position when Background Style is set to Advanced Gradient.
Background Animation (Flat Only)
Available when Background Style is set to Flat. When enabled, applies a 0.2-second linear transition between the resting and hover background states.
Border
Sets the default border for all buttons in the group. Individual button Style tabs can override these settings.
Border settings
Border settings
Border settings control border style, width, color, radius, and related responsive border controls where available.
Border Hover Color
The border color used when the button is hovered.
Individual button settings​
Each button in the group has its own settings, accessible by clicking Edit on any button in the Buttons tab. Individual button settings are divided into a General tab and a Style tab.
Button module settings
Each button uses the same core controls as the Button module, including text, link, icon, spacing, typography, background, and border settings.
Advanced tab​
The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.
See the Advanced tab section for more information.
The Advanced tab is global, so it is not available for individual button items in the Button Group module. As a result, the ID setting applies to the parent node div, not to each button.