Button group

Button group details

Available in Groundhog

This component is themable.

Related topics: Chart, Button, Tabs

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 ButtonGroupDefaultExampleComponent { } CPU Connectivity export class ButtonGroupDefaultExampleComponent { }

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 ButtonGroupItemDisabledExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupItemDisabledExampleComponent { }

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 ButtonGroupErrorExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupErrorExampleComponent { }

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 ButtonGroupDisabledExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupDisabledExampleComponent { }

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

´ 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 ButtonGroupDefaultExampleComponent { } CPU Connectivity export class ButtonGroupDefaultExampleComponent { }

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.

Example:

Attribute Description
dt-button-group Indicate the outer element of the button group. The group element can contain multiple <dt-button-group-item> elements.
dt-button-group-item The element of an individual button.

Options & Properties

Button group

Name Type Default Description
[value] T | undefined undefined Gets sets the current value
[disabled] boolean | undefined undefined Sets disable state if property is set and the value is truthy or undefined
[tabIndex] number 0 Sets and gets the tabIndex property
(valueChange) event<T> Emits an event when the user selects an other button.

Button group item

Name Type Default Description
<ng-content> The content/text which is displayed inside of the item
[value] T | undefined undefined The associated value of this item
[disabled] boolean | undefined undefined Sets disable 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] string | undefined undefined Sets color. Possible options:
  • main (default)
  • error

Examples

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 ButtonGroupDisabledExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupDisabledExampleComponent { }

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 ButtonGroupItemDisabledExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupItemDisabledExampleComponent { }

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 ButtonGroupErrorExampleComponent { } CPU Connectivity Failure rate export class ButtonGroupErrorExampleComponent { }

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 ButtonGroupInteractiveExampleComponent { 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; }
{{gvalue.name}}
Current value: {{ control1.value }}
export class ButtonGroupInteractiveExampleComponent { 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; }