Button group

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.

´ Loading interactive demo...
<dt-button-group> <dt-button-group-item>CPU</dt-button-group-item> <dt-button-group-item>Connectivity</dt-button-group-item> </dt-button-group> export class ButtonGroupDefaultExample {} <dt-button-group> <dt-button-group-item>CPU</dt-button-group-item> <dt-button-group-item>Connectivity</dt-button-group-item> </dt-button-group> export class ButtonGroupDefaultExample {}

States

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

´ Loading interactive demo...
<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> export class ButtonGroupItemDisabledExample {} <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> export class ButtonGroupItemDisabledExample {}

A button group can hold buttons in an error state.

´ Loading interactive demo...
<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> export class ButtonGroupErrorExample {} <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> export class ButtonGroupErrorExample {}

The complete button group can be disabled.

´ Loading interactive demo...
<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> export class ButtonGroupDisabledExample {} <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> export class ButtonGroupDisabledExample {}

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).

Chart tabs

This component creates a button group element with Dynatrace styling.

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 Dynatrace button group, 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

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

Examples

Default

´ Loading interactive demo...
<dt-button-group> <dt-button-group-item>CPU</dt-button-group-item> <dt-button-group-item>Connectivity</dt-button-group-item> </dt-button-group> export class ButtonGroupDefaultExample {} <dt-button-group> <dt-button-group-item>CPU</dt-button-group-item> <dt-button-group-item>Connectivity</dt-button-group-item> </dt-button-group> export class ButtonGroupDefaultExample {}

Group disabled

´ Loading interactive demo...
<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> export class ButtonGroupDisabledExample {} <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> export class ButtonGroupDisabledExample {}

Item disabled

´ Loading interactive demo...
<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> export class ButtonGroupItemDisabledExample {} <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> export class ButtonGroupItemDisabledExample {}

Error state

´ Loading interactive demo...
<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> export class ButtonGroupErrorExample {} <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> export class ButtonGroupErrorExample {}

Interactive example

´ Loading interactive demo...
<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: .5em;">Current value: {{ control1.value }}</div> <div style="margin-top: .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> export class ButtonGroupInteractiveExample { groupValues: Array<{ key: string; name: string }> = [ { key: 'perf', name: 'Performance' }, { key: 'conn', name: 'Connectivity' }, { key: 'fail', name: 'Failure rate' }, { key: 'av', name: 'Availability' }, { key: 'cpu', name: 'CPU' }, ]; control1AllDisabled = false; control1secondDisabled = false; control1secondOdd = false; } <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: .5em;">Current value: {{ control1.value }}</div> <div style="margin-top: .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> export class ButtonGroupInteractiveExample { groupValues: Array<{ key: string; name: string }> = [ { key: 'perf', name: 'Performance' }, { key: 'conn', name: 'Connectivity' }, { key: 'fail', name: 'Failure rate' }, { key: 'av', name: 'Availability' }, { key: 'cpu', name: 'CPU' }, ]; control1AllDisabled = false; control1secondDisabled = false; control1secondOdd = false; }