diff --git a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html
new file mode 100644
index 000000000000..aade97177e89
--- /dev/null
+++ b/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>
diff --git a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts
new file mode 100644
index 000000000000..d32921236eef
--- /dev/null
+++ b/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 {}
diff --git a/src/components-examples/material/button-toggle/index.ts b/src/components-examples/material/button-toggle/index.ts
index 618e8d05f2cf..eb679e324bf8 100644
--- a/src/components-examples/material/button-toggle/index.ts
+++ b/src/components-examples/material/button-toggle/index.ts
@@ -11,6 +11,7 @@ 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,
@@ -18,6 +19,7 @@ export {
   ButtonToggleOverviewExample,
   ButtonToggleHarnessExample,
   ButtonToggleFormsExample,
+  ButtonToggleModeExample,
 };
 
 const EXAMPLES = [
@@ -26,6 +28,7 @@ const EXAMPLES = [
   ButtonToggleOverviewExample,
   ButtonToggleHarnessExample,
   ButtonToggleFormsExample,
+  ButtonToggleModeExample,
 ];
 
 @NgModule({
diff --git a/src/material/button-toggle/button-toggle.md b/src/material/button-toggle/button-toggle.md
index b4e6b3228b83..5671b0fde406 100644
--- a/src/material/button-toggle/button-toggle.md
+++ b/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