button-group

Overview

button-group allows for grouping of multiple button components, providing better control over layout and visibility.

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

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

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

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.

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

<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

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.