diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md
index 11021e56f..966edeece 100644
--- a/docs/docs/components/callout.md
+++ b/docs/docs/components/callout.md
@@ -19,43 +19,40 @@ icon: callout
 Set the `variant` attribute to change the callout's variant.
 
 ```html {.example}
-<wa-callout variant="brand">
-  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
-  <strong>This is super informative</strong><br />
-  You can tell by how pretty the callout is.
-</wa-callout>
-
-<br />
-
-<wa-callout variant="success">
-  <wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
-  <strong>Your changes have been saved</strong><br />
-  You can safely exit the app now.
-</wa-callout>
-
-<br />
-
-<wa-callout variant="neutral">
-  <wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
-  <strong>Your settings have been updated</strong><br />
-  Settings will take effect on next login.
-</wa-callout>
-
-<br />
-
-<wa-callout variant="warning">
-  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
-  <strong>Your session has ended</strong><br />
-  Please login again to continue.
-</wa-callout>
-
-<br />
-
-<wa-callout variant="danger">
-  <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
-  <strong>Your account has been deleted</strong><br />
-  We're very sorry to see you go!
-</wa-callout>
+{% for variant, info in {
+  brand: {
+    title: 'This is super informative',
+    content: 'You can tell by how pretty the callout is.',
+    icon: 'circle-info'
+  },
+  success: {
+    title: 'Your changes have been saved',
+    content: 'You can safely exit the app now.',
+    icon: 'circle-check'
+  },
+  neutral: {
+    title: 'Your settings have been updated',
+    content: 'Settings will take effect on next login.',
+    icon: 'gear'
+  },
+  warning: {
+    title: 'Your session has ended',
+    content: 'Please login again to continue.',
+    icon: 'triangle-exclamation'
+  },
+  danger: {
+    title: 'Your account has been deleted',
+    content: 'We’re very sorry to see you go!',
+    icon: 'circle-exclamation'
+  }
+} %}
+  <wa-callout variant="{{ variant }}">
+    <wa-icon slot="icon" name="{{ info.icon }}" variant="regular"></wa-icon>
+    <strong>{{ info.title }}</strong><br />
+    {{ info.content }}
+  </wa-callout>
+  {% if not loop.last %}<br />{% endif %}
+{% endfor %}
 ```
 
 ### Appearance
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index dc1e7cabc..96cde1a44 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -69,7 +69,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
+  @property() variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
 
   /** The button's visual appearance. */
   @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';