docs(button): add stroked buttons to examples

Adds the stroked buttons to the button varieties example and includes some margin so the buttons don't stick together.

Fixes #11379.

Author: crisbeto

src/lib/button/button.md

@@ -22,9 +22,9 @@ There are five button variants, each applied as an attribute:
 
 ### Theming
 Buttons can be colored in terms of the current theme using the `color` property to set the
-background color to `primary`, `accent`, or `warn`. By default, only FABs (Floating Action Button) 
-are colored; the default background color for `mat-button` and `mat-raised-button` matches the theme's 
-background color.
+background color to `primary`, `accent`, or `warn`. By default, only FABs (Floating Action Button)
+are colored; the default background color for `mat-button` and `mat-raised-button` matches the
+theme's background color.
 
 ### Capitalization
 According to the Material design spec button text has to be capitalized, however we have opted not
@@ -39,5 +39,5 @@ default. The `<button>` element should be used for any interaction that _perform
 current page_. The `<a>` element should be used for any interaction that _navigates to another
 view_.
 
-Buttons or links containing only icons (such as `mat-fab`, `mat-mini-fab`, and `mat-icon-button`) should
-be given a meaningful label via `aria-label` or `aria-labelledby`.
+Buttons or links containing only icons (such as `mat-fab`, `mat-mini-fab`, and `mat-icon-button`)
+should be given a meaningful label via `aria-label` or `aria-labelledby`.

src/material-examples/button-types/button-types-example.css

@@ -3,3 +3,8 @@
   align-items: center;
   justify-content: space-around;
 }
+
+.example-button-row button,
+.example-button-row a {
+  margin-right: 8px;
+}

src/material-examples/button-types/button-types-example.html

@@ -18,6 +18,16 @@ <h3>Raised Buttons</h3>
   <a mat-raised-button routerLink=".">Link</a>
 </div>
 
+<h3>Stroked Buttons</h3>
+<div class="button-row">
+  <button mat-stroked-button>Basic</button>
+  <button mat-stroked-button color="primary">Primary</button>
+  <button mat-stroked-button color="accent">Accent</button>
+  <button mat-stroked-button color="warn">Warn</button>
+  <button mat-stroked-button disabled>Disabled</button>
+  <a mat-stroked-button routerLink=".">Link</a>
+</div>
+
 <h3>Icon Buttons</h3>
 <div class="button-row">
   <button mat-icon-button>