Button Toggle

Angular Material Button Toggle lets users toggle between multiple states, such as switching between views, modes, or options. A toggle can stand on its own or sit in a group laid out in a row or a column, it can take a single choice or several at once, and the chosen ones stay pressed with a checkmark next to the label. BuilderKit restyles the group, the pressed state and that selection indicator.

For the same single choice spelled out as a list rather than a row of buttons, use the radio button component.

Playground

<mat-button-toggle value="bold" [checked]="true">Bold</mat-button-toggle>

<mat-button-toggle-group name="fontStyle" value="bold">
  <mat-button-toggle value="bold">Bold</mat-button-toggle>
  <mat-button-toggle value="italic">Italic</mat-button-toggle>
  <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

Icon only toggles

A toggle can hold nothing but an icon, which keeps a view switcher compact. Hiding the selection indicator leaves the pressed background as the only marker of the current choice.

<mat-button-toggle-group name="view" value="grid" hideSingleSelectionIndicator>
  <mat-button-toggle value="grid">
    <mat-icon svgIcon="layout-grid" />
  </mat-button-toggle>
  <mat-button-toggle value="list">
    <mat-icon svgIcon="layout-list" />
  </mat-button-toggle>
  <mat-button-toggle value="table">
    <mat-icon svgIcon="table" />
  </mat-button-toggle>
</mat-button-toggle-group>

Segmented control NEW

BuilderKit adds a segmented control treatment on top of the Angular Material Button Toggle. Add the segmented class to a group and the toggles sit together on a recessed background, with the checked one raised to look exactly like a secondary button, same border, shadow and highlight. It works with the size classes, icon only toggles, multiple selection and vertical groups.

<mat-button-toggle-group class="segmented" name="range" value="week">
  <mat-button-toggle value="day">Day</mat-button-toggle>
  <mat-button-toggle value="week">Week</mat-button-toggle>
  <mat-button-toggle value="month">Month</mat-button-toggle>
</mat-button-toggle-group>

<mat-button-toggle-group class="segmented" name="view" value="list" hideSingleSelectionIndicator>
  <mat-button-toggle value="list">
    <mat-icon svgIcon="list" />
  </mat-button-toggle>
  <mat-button-toggle value="board">
    <mat-icon svgIcon="kanban" />
  </mat-button-toggle>
  <mat-button-toggle value="timeline">
    <mat-icon svgIcon="chart-gantt" />
  </mat-button-toggle>
</mat-button-toggle-group>