diff --git a/behat.yml.dist b/behat.yml.dist
index 8e4da865c334043eba0ea482301484266b46d483..1cfd61595372016b5b52e63f0452496420bf472d 100644
--- a/behat.yml.dist
+++ b/behat.yml.dist
@@ -37,6 +37,10 @@ default:
         jumbotron: '.jumbotron'
         quote: '.quote'
         modal: '.modal-dialog'
+        preview: '.pattern-preview'
+        button_default: '.pattern-preview--default'
+        button_primary: '.pattern-preview--primary'
+        button_error: '.pattern-preview--error'
       selectors:
         error_message_selector: '.alert.alert-danger'
       text:
diff --git a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/button/pattern-button--error.html.twig b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/button/pattern-button--error.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..18a2654f565da87733ed6c87a1a3a1e438a412e2
--- /dev/null
+++ b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/button/pattern-button--error.html.twig
@@ -0,0 +1,7 @@
+{#
+/**
+ * @file
+ * Button pattern.
+ */
+#}
+<a href="{{ url }}" target="_blank" class="btn btn-{{ variant }} button">{{ 'Cancel'|t }}</a>
diff --git a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig
index d1f2bab188cc335f5f20878f087cde527b877e86..5ba907a436526679b89265561e65dc4203ff81a8 100644
--- a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig
+++ b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig
@@ -33,10 +33,16 @@
 
         {# Rendered pattern preview. #}
         <div class="pattern-preview">
-          {% for variant in pattern.previews %}
-            <h3>{{ variant.meta['#variant'].label }}</h3><hr>
-            <span>{{ variant.meta['#variant'].description }}</span>
-              {{ variant.rendered }}
+          {% for preview in pattern.previews %}
+            {% if preview.meta['#variant'] is not empty %}
+              <div class="pattern-preview--{{ preview.meta['#variant'].name }}">
+              <h3>{{ preview.meta['#variant'].label }}</h3><hr>
+              <p>{{ preview.meta['#variant'].description }}</p>
+            {% endif %}
+            {{ preview.rendered }}
+            {% if preview.meta['#variant'] is not empty %}
+              </div>
+            {% endif %}
           {% endfor %}
         </div>
       </div>
diff --git a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig
index 958f6d949cd22ba5b3cb6cc19c6233004d0c0739..0dc5a42917f066452254800a214148470adb6e70 100644
--- a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig
+++ b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig
@@ -10,10 +10,16 @@
   {{ pattern.meta }}
   {# Rendered pattern preview. #}
   <div class="pattern-preview">
-    {% for variant in pattern.previews %}
-      <h3>{{ variant.meta['#variant'].label }}</h3><hr>
-      <span>{{ variant.meta['#variant'].description }}</span>
-      {{ variant.rendered }}
+    {% for preview in pattern.previews %}
+      {% if preview.meta['#variant'] is not empty %}
+        <div class="pattern-preview--{{ preview.meta['#variant'].name }}">
+          <h3>{{ preview.meta['#variant'].label }}</h3><hr>
+          <p>{{ preview.meta['#variant'].description }}</p>
+      {% endif %}
+      {{ preview.rendered }}
+      {% if preview.meta['#variant'] is not empty %}
+          </div>
+      {% endif %}
     {% endfor %}
   </div>
 
diff --git a/tests/features/overview.feature b/tests/features/overview.feature
index fd4354f3fac5251c9e99ca913a3da3a71f0c7a43..86bafe9da4c66192a6ddcb8394e71091341655af 100644
--- a/tests/features/overview.feature
+++ b/tests/features/overview.feature
@@ -87,3 +87,20 @@ Feature: Overview
       | error messages                                                                 |
       | Pattern 'bad_pattern' is skipped because of the following validation error(s): |
       | Validation error on "bad_pattern.label": This value should not be null.        |
+
+  Scenario: Patterns simple page of button will show all button's variants with custom template.
+
+    Given I am logged in as a user with the "access patterns page" permission
+    And I am on "/patterns/button"
+
+    Then I should see the heading "Button"
+    And I should see "A simple button."
+
+    And I should see "Default" in the "preview"
+    And I should see "Submit" in the "button_default"
+
+    And I should see "Primary" in the "preview"
+    And I should see "Submit" in the "button_primary"
+
+    And I should see "Error" in the "preview"
+    And I should see "Cancel" in the "button_error"
diff --git a/ui_patterns.module b/ui_patterns.module
index 09d32d970ab4bbb1c77a16d2424171cf388f1bc9..ec6a51c4217913bf398aa8ab24d2a22914a2fad6 100644
--- a/ui_patterns.module
+++ b/ui_patterns.module
@@ -6,6 +6,7 @@
  */
 
 use Drupal\ui_patterns\UiPatterns;
+use Drupal\ui_patterns\Element\PatternContext;
 
 /**
  * Implements hook_theme().
@@ -44,7 +45,6 @@ function ui_patterns_library_info_build() {
  * Implements hook_theme_suggestions_HOOK_alter().
  */
 function ui_patterns_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
-
   if (UiPatterns::getManager()->isPatternHook($hook)) {
     \Drupal::moduleHandler()->alter('ui_patterns_suggestions', $suggestions, $variables, $variables['context']);
   }
@@ -53,3 +53,15 @@ function ui_patterns_theme_suggestions_alter(array &$suggestions, array $variabl
     \Drupal::moduleHandler()->alter('ui_patterns_destination_suggestions', $suggestions, $variables, $variables['context']);
   }
 }
+
+/**
+ * Implements hook_ui_patterns_suggestions_alter().
+ */
+function ui_patterns_ui_patterns_suggestions_alter(array &$suggestions, array $variables, PatternContext $context) {
+  if ('' !== $variables['variant']) {
+    $hook = $variables['theme_hook_original'];
+    $variant = $variables['variant'];
+
+    $suggestions[] = $hook . '__' . $variant;
+  }
+}