button-group
button-group
allows for grouping of multiple button
components, providing better control over layout and visibility.Version Compatibility
button-group
v3 with support for floating action buttons were introduced in version 4.70.0 of the JourneyApps Runtime.For more information on
button
, please see the linked documentation:<button-group>
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>

None
Specify the alignment of button content for all buttons in the
button-group
. See more info about align-content
:Version compatibility
button-order
was introduced in version 4.86.1 of the JourneyApps Runtime.Optional
Type:
left-to-right
|right-to-left
Default:
left-to-right

Optional
Type:
string
- can be a named color or #HEX valueDefault: unset
Optional
Type:
boolean
Default:
false
Disables all buttons in the
button-group
to prevent a user from firing their actions.<button-group disabled="true">
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>
Optional
Type:
string
Default: unset
This attribute is only available with
type="floating".
The icon of the main button when using a floating action button group.
Optional
Type:
string
- can be a named color or #HEX valueDefault: unset
Specify the position of button icons for all buttons in the
button-group
. See more info about icon-position
:Configure the letter case of the
label
for all buttons in the button-group
. See more info about label-case
:Optional
Type:
integer
Default:
550 px
Version compatibility
min-width-breakpoint
was introduced in version 4.84.1 of the JourneyApps Runtime.Override at what point
button-group
changes from a row (aligned horizontally) into a column (aligned vertically) layout. The value (in pixel) refers to the minimum width of the screen, at which point the button-group
should change its layout.Example: Default (550 px):
<button-group>
<button icon="fa-times-circle" validate="false" style="outline" />
<button icon="fa-trash" validate="false" style="outline" />
<button icon="fa-check-circle" validate="false" />
</button-group>
On a large screen:

On a small screen:

Example: Where
min-width-breakpoint
is reduced 200 px:<button-group min-width-breakpoint="200">
<button icon="fa-times-circle" validate="false" style="outline" />
<button icon="fa-trash" validate="false" style="outline" />
<button icon="fa-check-circle" validate="false" />
</button-group>
On a large screen:

On a small screen:

Optional
Type:
row
| column
| split
| collapsed
Default:
row
Control the layout of buttons with a button group.
A
button-group
in mode="row"
will switch to mode="column"
on devices with smaller screens.Mode:
row
<button-group mode="row">
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Home" style="outline" icon="fa-home" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>

Mode:
column
<button-group mode="column">
<button label="Button 1" icon="fa-car" />
<button label="Button 2" icon="fa-bath" />
<button label="Button 3" icon="fa-bomb" />
</button-group>

Mode:
split
When using
split
mode, the first button is kept full, the rest of the buttons are converted to an action sheet, represented by an icon-only button that matches the style of the first button.<button-group mode="split">
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Home" style="outline" icon="fa-home" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>

Mode:
collapsed
Collapsed button-groups transforms all buttons to a single button that opens an Action Sheet when selected.
<button-group mode="collapsed">
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Home" style="outline" icon="fa-home" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>


Note: A
button-group
will also be hidden when it contains no visible buttons.Optional
Type:
solid
| outline
Default:
solid
Optional
Type:
normal
| primary
| floating
Default:
normal
Specify the type of
button-group
, in most cases the default will suffice.Both special case types, i.e.
primary
| floating
have different behaviors and constraints.Type:
primary
Pin a button group at the bottom of the view
Only one
button-group
with type="primary"
is allowed per view.<button-group type="primary">
<button label="Previous" icon="fa-arrow-left" />
<button label="Home" icon="fa-home" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>

Type:
floating
Add a floating action button (FAB) or button group to view. Different to
type="primary"
, this FABs are pinned to the bottom right corner of the screenOnly one
button-group
with type="floating"
is allowed per view.Single floating button
<button-group type="floating">
<button label="Home" icon="fa-home" />
</button-group>

Floating button group
<button-group type="floating">
<button label="Previous" icon="fa-arrow-left" />
<button label="Home" icon="fa-home" />
<button label="Next" icon="fa-arrow-right" />
</button-group>

Select the button to open the floating action button group:

The following component methods are available when an
id
is assigned to the component and component.buttonGroup({id:'my-id'})
is called from JS/TS:Programmatically scroll until the
button-group
is visible in the view.Last modified 9mo ago