A button group has the same behavior as the tabs component and is used to switch between different views. The first non-disabled button is always preselected.

<dt-button-group>
  <dt-button-group-item>CPU</dt-button-group-item>
  <dt-button-group-item>Connectivity</dt-button-group-item>
</dt-button-group>

Imports

You have to import the DtButtonGroupModule when you want to use the dt-button-group


@NgModule({
  imports: [
    DtButtonGroupModule,
  ],
}
class MyModule {}

Initialization

To apply the button group component, use the <dt-button-group> and <dt-button-group-item> elements.

Attribute Description
dt-button-group Wrapper element for the button group. It can contain multiple <dt-button-group-item> elements.
dt-button-group-item The individual button elements.

Inputs

Name Type Default Description
value T | undefined undefined Gets and sets the current value
disabled boolean | undefined undefined Sets disabled state if property is set and the value is truthy or undefined
tabIndex number 0 Sets and gets the tabIndex property 
<div>
  <dt-button-group #control1 [disabled]="control1AllDisabled">
    <ng-container *ngFor="let gvalue of groupValues; let i = index">
      <dt-button-group-item
        *ngIf="!control1secondOdd || i % 2 === 0"
        [value]="gvalue.key"
        [disabled]="i === 2 && control1secondDisabled"
      >
        {{ gvalue.name }}
      </dt-button-group-item>
    </ng-container>
  </dt-button-group>
</div>
<div style="margin-top: 0.5em">Current value: {{ control1.value }}</div>
<div style="margin-top: 0.5em">
  <button dt-button (click)="control1.value = groupValues[0].key">
    Select 1
    <sup>st</sup>
    key
  </button>
  <button dt-button (click)="control1.value = groupValues[1].key">
    Select 2
    <sup>nd</sup>
    key
  </button>
  <button dt-button (click)="control1AllDisabled = !control1AllDisabled">
    Toggle all disabled
  </button>
  <button dt-button (click)="control1secondDisabled = !control1secondDisabled">
    Toggle 3
    <sup>rd</sup>
    disabled
  </button>
  <button dt-button (click)="control1secondOdd = !control1secondOdd">
    Toggle odd items
  </button>
</div>

Outputs

Name Type Description
valueChange event<T> Emits an event when the user selects another button.

Methods

Name Description Return value
focus() Sets focus to the first item in the <dt-button-group>. void

Button group item inputs

Name Type Default Description
<ng-content> The content which is displayed inside of the item. This should only be text.
value T | undefined undefined The associated value of this item
disabled boolean | undefined undefined Sets disabled state if property is set and the value is truthy or undefined
tabIndex number 0 Sets and gets the tabIndex property
deprecated selected boolean false Sets or gets the selected state of this item
checked boolean false Sets or gets the checked state of this item
color 'main' | 'error' main Sets color. Possible options:
  • main (default)
  • error

The property selected is deprecated and will be renamed to checked in version 9.0.0

Button group item outputs

Name Type Description
checkedChange event<DtButtonGroupItemCheckedChange<T>> Emits an event when the checked attribute changed.

Button group item methods

Name Description Return value
focus() Sets focus to the <dt-button-group-item>. void

States

Buttons within a button group have a default, hover, active, focus, and disabled state.

<dt-button-group>
  <dt-button-group-item>CPU</dt-button-group-item>
  <dt-button-group-item disabled>Connectivity</dt-button-group-item>
  <dt-button-group-item selected>Failure rate</dt-button-group-item>
</dt-button-group>

Group disabled

The complete button group can be disabled.

<dt-button-group disabled>
  <dt-button-group-item>CPU</dt-button-group-item>
  <dt-button-group-item>Connectivity</dt-button-group-item>
  <dt-button-group-item>Failure rate</dt-button-group-item>
</dt-button-group>

Error state

A button group can hold buttons in an error state.

<dt-button-group value="cpu">
  <dt-button-group-item value="cpu">CPU</dt-button-group-item>
  <dt-button-group-item value="conn">Connectivity</dt-button-group-item>
  <dt-button-group-item color="error" value="error">
    Failure rate
  </dt-button-group-item>
</dt-button-group>

Button group in use

Chart tabs

A button group placed above the chart can be used to switch metrics displayed in a chart. Combined with a chart button groups are also called chart tabs. These tabs can contain single metrics or metric groups (e.g. response time and requests).

View
<dt-button-group (valueChange)="switchMetric($event)">
  <dt-button-group-item>CPU usage</dt-button-group-item>
  <dt-button-group-item>Connectivity</dt-button-group-item>
  <dt-button-group-item>Retransmissions</dt-button-group-item>
</dt-button-group>
<dt-chart [options]="options" [series]="series">
  <dt-chart-tooltip>
    <ng-template let-tooltip>
      <dt-key-value-list style="min-width: 100px">
        <dt-key-value-list-item *ngFor="let data of tooltip.points">
          <dt-key-value-list-key>
            {{ data.series.name }}
          </dt-key-value-list-key>
          <dt-key-value-list-value>
            {{ data.point.y }}
          </dt-key-value-list-value>
        </dt-key-value-list-item>
      </dt-key-value-list>
    </ng-template>
  </dt-chart-tooltip>
</dt-chart>