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
selected boolean false Sets or gets the selected state of this item
color 'main' | 'error' main Sets color. Possible options:
  • main (default)
  • error

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>