What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

button-group

Overview

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:

Basic Example

<button-group>
<button label="Previous" style="outline" icon="fa-arrow-left" />
<button label="Next" icon="fa-arrow-right" icon-position="right" />
</button-group>

Standard Attributes

None

Advanced Attributes

align-content

Specify the alignment of button content for all buttons in the button-group. See more info about align-content:

button-order

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
Specify the order of buttons when the button-group mode is set to row.

color

Optional
Type: string - can be a named color or #HEX value
Default: unset
Specify the color for all buttons in the button-group.

disabled

Optional
Type: boolean
Default: false
Disables all buttons in the button-group to prevent a user from firing their actions.

Example: Disabled buttons

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

id

icon

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.

icon-color

Optional
Type: string - can be a named color or #HEX value
Default: unset
Specify the icon-color for all buttons in the button-group.

icon-position

Specify the position of button icons for all buttons in the button-group. See more info about icon-position:

label-case

Configure the letter case of the label for all buttons in the button-group. See more info about label-case:

min-width-breakpoint

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:

mode

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.

Examples: Button group modes

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>

show-if and hide-if

Note: A button-group will also be hidden when it contains no visible buttons.

style

Optional
Type: solid | outline
Default: solid
Set the style of all buttons in the button-group.

type

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.

Examples: Button group types

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 screen
Only 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:

Component Methods

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:

scrollIntoView

Programmatically scroll until the button-group is visible in the view.
Previous
button
Next
capture-coordinates
Last modified 9mo ago