button-group
Last updated
Last updated
button-group allows for grouping of multiple components, providing better control over layout and visibility.
For more information on button, please see the linked documentation:
None
align-contentSpecify the alignment of button content for all buttons in the button-group. See more info about align-content:
button-orderOptional
Type: left-to-right|right-to-left
Default: left-to-right
colorOptional
Type: string - can be a named color or #HEX value
Default: unset
disabledOptional
Type: boolean
Default: false
Disables all buttons in the button-group to prevent a user from firing their actions.
idiconOptional
Type: string
Default: unset
The icon of the main button when using a floating action button group.
icon-colorOptional
Type: string - can be a named color or #HEX value
Default: unset
icon-positionSpecify the position of button icons for all buttons in the button-group. See more info about icon-position:
label-caseConfigure the letter case of the label for all buttons in the button-group. See more info about label-case:
min-width-breakpointOptional
Type: integer
Default: 550 px
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):
On a large screen:
On a small screen:
Example: Where min-width-breakpoint is reduced 200 px:
On a large screen:
On a small screen:
modeOptional
Type: row | column | split | collapsed
Default: row
Control the layout of buttons with a button group.
Mode: row
Mode: column
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.
Mode: collapsed
Collapsed button-groups transforms all buttons to a single button that opens an Action Sheet when selected.
show-if and hide-ifNote: A button-group will also be hidden when it contains no visible buttons.
styleOptional
Type: solid | outline
Default: solid
typeOptional
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.
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
Floating button group
Select the button to open the floating action button group:
scrollIntoViewProgrammatically scroll until the button-group is visible in the view.
Specify the order of buttons when the button-group is set to row.
Specify the for all buttons in the button-group.
Specify the for all buttons in the button-group.
Set the of all buttons in the button-group.
The following component methods are available when an is assigned to the component and component.buttonGroup({id:'my-id'}) is called from JS/TS:
