Button Group overview

NbButtonGroupComponent

<nb-button-group> visually groups buttons together and allow to control buttons properties and the state as a group.

Installation

Import NbButtonGroupModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbButtonGroupModule,
  ],
})
export class PageModule { }

Usage

You can use <nb-button-group> to group a series of [nbButton] or [nbButtonToggle] components.

For a group of multiple [nbButtonToggle] you also can control multi-selection behavior. By default, the group component allows only one pressed button toggle at a time (similar to the radio group). To be able to keep multiple toggles pressed, you need to add multiple attributes to the <nb-button-toggle>.

To know which buttons are currently pressed listen to (valueChange) on the nb-button-group. Event contains an array of values of currently pressed button toggles. You can assign a value to the [nbButtonToggle] via the value input.

To disable a group of buttons, add a disabled attribute to the <nb-button-group>.

The group component controls all visual attributes of buttons such as appearance, status, size, shape. You can change it via the appropriate attributes.

Button group appearances:

Button group statuses:

Button group sizes:

Buttons group shapes:

NbButtonToggleDirective

[nbButtonToggle] is a directive to add a pressed state to a button.