diff --git a/demos/button.html b/demos/button.html
index c754e1556b3..07294003844 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -201,6 +201,30 @@
Ripple Enabled
+
+
CSS Only
+
+
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 0bca94a52f1..3471dfc279c 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -71,6 +71,14 @@ semantically correct.
```
+#### Stroked Button
+
+```html
+
+```
+
### Button state
#### Disabled
@@ -138,6 +146,7 @@ The provided modifiers are:
| --------------------- | ------------------------------------------------------- |
| `mdc-button--raised` | A contained button that is elevated upon the surface. |
| `mdc-button--unelevated` | A contained button that is flush with the surface. |
+| `mdc-button--stroked` | A contained button that is flush with the surface and has a visible border. |
| `mdc-button--dense` | Compresses the button text to make it slightly smaller. |
| `mdc-button--compact` | Reduces the amount of horizontal padding in the button. |
| `mdc-button--primary` | Colors the button with the primary color. |
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 9b9b08dcdf6..877a4be5304 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -94,6 +94,23 @@
}
}
+.mdc-button--stroked {
+ @include mdc-theme-prop(border-color, text-primary-on-light);
+
+ border-width: 2px;
+ border-style: solid;
+ line-height: 32px;
+
+ @include mdc-theme-dark(".mdc-button") {
+ @include mdc-theme-prop(border-color, text-primary-on-dark);
+ }
+
+ // postcss-bem-linter: ignore
+ &.mdc-button--dense {
+ line-height: 27px; // To accommodate odd font size of dense button
+ }
+}
+
.mdc-button--compact {
padding: 0 8px;
}
@@ -134,6 +151,14 @@
@include mdc-theme-prop(background-color, $theme-style);
@include mdc-theme-prop(color, text-primary-on-#{$theme-style});
}
+ // postcss-bem-linter: ignore
+ &.mdc-button--stroked {
+ @include mdc-theme-prop(border-color, $theme-style);
+
+ @include mdc-theme-dark(".mdc-button") {
+ @include mdc-theme-prop(border-color, $theme-style);
+ }
+ }
}
}
@@ -168,4 +193,15 @@
}
}
}
+
+.mdc-button--stroked {
+ fieldset:disabled &,
+ &:disabled {
+ border-color: rgba(black, .38);
+
+ @include mdc-theme-dark(".mdc-button") {
+ @include mdc-theme-prop(border-color, text-disabled-on-dark);
+ }
+ }
+}
// postcss-bem-linter: end