docs(material/button-toggle): add selection mode example (#23415)

Adds a new example showing a button toggle in multiple selection mode.

Fixes #23344.

Author: crisbeto

src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html

@@ -0,0 +1,13 @@
+<h3>Single selection</h3>
+<mat-button-toggle-group name="favoriteColor" aria-label="Favorite Color">
+  <mat-button-toggle value="red">Red</mat-button-toggle>
+  <mat-button-toggle value="green">Green</mat-button-toggle>
+  <mat-button-toggle value="blue">Blue</mat-button-toggle>
+</mat-button-toggle-group>
+
+<h3>Multiple selection</h3>
+<mat-button-toggle-group name="ingredients" aria-label="Ingredients" multiple>
+  <mat-button-toggle value="flour">Flour</mat-button-toggle>
+  <mat-button-toggle value="eggs">Eggs</mat-button-toggle>
+  <mat-button-toggle value="sugar">Sugar</mat-button-toggle>
+</mat-button-toggle-group>

src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Button toggle selection mode
+ */
+@Component({
+  selector: 'button-toggle-mode-example',
+  templateUrl: 'button-toggle-mode-example.html',
+})
+export class ButtonToggleModeExample {}

src/components-examples/material/button-toggle/index.ts

@@ -11,13 +11,15 @@ import {
 import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 import {ButtonToggleHarnessExample} from './button-toggle-harness/button-toggle-harness-example';
 import {ButtonToggleFormsExample} from './button-toggle-forms/button-toggle-forms-example';
+import {ButtonToggleModeExample} from './button-toggle-mode/button-toggle-mode-example';
 
 export {
   ButtonToggleAppearanceExample,
   ButtonToggleExclusiveExample,
   ButtonToggleOverviewExample,
   ButtonToggleHarnessExample,
   ButtonToggleFormsExample,
+  ButtonToggleModeExample,
 };
 
 const EXAMPLES = [
@@ -26,6 +28,7 @@ const EXAMPLES = [
   ButtonToggleOverviewExample,
   ButtonToggleHarnessExample,
   ButtonToggleFormsExample,
+  ButtonToggleModeExample,
 ];
 
 @NgModule({

src/material/button-toggle/button-toggle.md

@@ -11,9 +11,11 @@ In this mode, the `value` of the `mat-button-toggle-group` will reflect the valu
 button and `ngModel` is supported.
 
 Adding the `multiple` attribute allows multiple items to be selected (checkbox behavior). In this
-mode the values of the toggles are not used, the `mat-button-toggle-group` does not have a value, 
+mode the values of the toggles are not used, the `mat-button-toggle-group` does not have a value,
 and `ngModel` is not supported.
 
+<!-- example(button-toggle-mode) -->
+
 ### Appearance
 By default, the appearance of `mat-button-toggle-group` and `mat-button-toggle` will follow the
 latest Material Design guidelines. If you want to, you can switch back to the appearance that was